1

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.

inserir a descrição da imagem aqui

Aplicação

Link para aplicação como erro

3
  • No link que você colocou na pergunta, o menu não está como na imagem. Fica difícil de reproduzir e sugerir uma solução.
    – Sam
    Commented 23/01/2018 às 3:49
  • Seria isso? jsfiddle.net/v718rxtg/9 Commented 23/01/2018 às 10:23
  • era isso mesmo Valdeir Psr obrigado
    – User1999
    Commented 23/01/2018 às 17:12

1 Resposta 1

1

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...

  • Por hora isso deve resolver o seu problema, Execute o Snippet;

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .