Why might hover not work?

Question

css

There are three buttons that should change the style on hover, but for some reason the hover pseudo-class doesn't work. What could be the reason?

<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

all code is not visible. But I think pointer-events: none will help you; - poke this property to parents.

Answer 2

Not classname, just class

Answer 3

Everything is working