Почему может не работать hover?

Question

[gingerose]

Есть три кнопки, по наведению на которые, должен меняться стиль, но по какой то причине псевдокласс hover не работает. В чем может быть причина?

<div className="menu">
            <button className="login">log1</button>
            <button className="login">log2</button>
            <button className="login">log3</button>
          </div>

.menu
{
    margin-top: 70px;
    margin-left: 17%;
}
.login
{
    font-family: 'Times New Roman', Times, serif;
    font-size: 30px;
    color: white;
    border: none; 
    outline: none; 
    width: 250px;
    height: 300px;
    margin-left: 100px;
    background-color: rgba(48, 98, 207, 0.795);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.login:hover
{
    font-style: oblique;
    cursor: pointer;
    background-color: rgba(51, 157, 243, 0.795);
}

Answer 1

[Liuonid]

не виден весь код. Но думаю тебе поможет pointer-events: none; - потыкай это свойство родителям.

Comments

[gingerose]

Уже смогла решить, правда проблема была в родителе, спасибо)

[Liuonid]

Пожалуйста. Я не верный ответ дал. pointer-events - это наследуемое свойство. Она бы всё ховеры отключил бы. pointer-events: auto; - потом нужно было прописать детям.

Answer 2

[Илья]

Не classname, а просто class

Comments

[Ankhena]

У вопроса тег React, так что className

Answer 3

[Nikolay Matyushkin]

Всё работает