I can’t change the background color

Question

I am denswrapping a web application and I would like when I move the mouse over the menu to be white the menu item with the icon and the whole part on the left and right side but it is only a part.

Applying

Link to application as error

Answer 1

Your CSS had a number of things to tidy up, including all the :hover u placed separate from Ex selector:

Ex a :hover That’s wrong! It should be a:hover (notice that the : has no space)

This CSS is not perfect, I tried to move as little as possible in your classes so you can read later and understand and study what I did etc. Even so I strongly recommend that you have a good in-depth CSS, because the way it was all assembled is not the best...

• For now this should solve your problem, Run the Snippet;

OBS: I made only the menu "T-shirts", the rest you go making and seeing how it was assembled.

@-webkit-keyframes moveFromLeftRotate{
    from {
        -webkit-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg);
    }
}
@-moz-keyframes moveFromLeftRotate{
    from {
        -moz-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -moz-transform: translateX(0%) rotate(0deg);
    }
}
@-ms-keyframes moveFromLeftRotate{
    from {
        -ms-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -ms-transform: translateX(0%) rotate(0deg);
    }
}
ul li {
    list-style: none;
    display: flex;
}
.nano-content a:hover .teste{
     background-color: #fff;
     padding: 10px;
     text-decoration: underline;
     cursor: pointer;
    -webkit-animation: moveFromLeftRotate 300ms ease;
    -moz-animation: moveFromLeftRotate 300ms ease;
    -ms-animation: moveFromLeftRotate 300ms ease;
}

.nano-content a:hover {
     font-size: 13pt;
     color:rgb(37, 37, 170);
}
.nano-content a:hover i {
     display: none;
}
            
.nano-content {
    margin-left: 20px;
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
}
            
#lateral{
    float:left;     
    padding: 5px; 
    width: 35%; 
    height: 100%;
    overflow:auto; 
    background-color: #00008B;
    margin-top: 35px;
    color:#fff;
}

a:visited {
    color: #fff;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<aside id="lateral">

    <div id="lado_esquerdo_menu" class="nano">
        <ul class="nano-content">
        <li>
            <a href="index.html"><span id="home">HOME</span></a><br><br>
        </li>
        <li>
            <a>
            <div class="teste">
            <i class="arrow fa fa-angle-right "></i>
            Camisetas </div></a><br><br>
            
            
        </li>
        <li >
            <a><i class="arrow fa fa-angle-right "></i> Calçados</a><br><br>
            
        </li>
        <li >
            <a><i class="arrow fa fa-angle-right "></i> Bermudas</a><br><br>
        
        </li>
        
            <li>
            <a><i class="arrow fa fa-angle-right "></i> Contato</a>
        
        </li>
    
        </ul>
    </div>
    
</aside>