Estou densenvolvendo uma aplicação web e gostaria de que quando eu passase o mouse por cima do menu ficasse branco o item do menu com o icon e toda a parte do lado esquerdo e direito mas ele só fica uma parte.
Aplicação
Estou densenvolvendo uma aplicação web e gostaria de que quando eu passase o mouse por cima do menu ficasse branco o item do menu com o icon e toda a parte do lado esquerdo e direito mas ele só fica uma parte.
Aplicação
O seu CSS tinha várias coisinhas para arrumar, inclusive todos os :hover
vc colocou separado do seletor Ex:
Ex a :hover
isso é errado! Deveria ser a:hover
(repare que os : não tem espaço)
Esse CSS não está perfeito, tentei mexer o mínimo possível nas suas classes para vc poder ler depois e entender e poder estudar o que eu fiz etc. Mesmo assim recomendo fortemente que vc de uma boa aprofundada em CSS, pois a maneira que tudo foi montado não é a melhor...
OBS: Fiz apenas o menu "Camisetas", o restante vc vai fazendo e vendo como foi montado.
@-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>