1

Eu quero, que quando eu passe o mouse em cima da li, a div empresaMenusEsqhover fique como display:block. Eu posso fazer isso em Jquery, porém, quero fazer o máximo que eu conseguir via CSS.

Tenho o HTML:

<ul>
    <li>
        <h3>Apresentação</h3>
        <div style="display:none" class="empresaMenusEsqHover"></div>
    </li>
    <li>
        <h3>Perfil da Empresa</h3>
        <div style="display:none" class="empresaMenusEsqHover"></div>

    </li>
    <li>
        <h3>Histórico</h3>
        <div style="display:none" class="empresaMenusEsqHover"></div>
    </li>
    <li>
        <h3>Mercado de Atuação</h3>
        <div style="display:none" class="empresaMenusEsqHover"></div>
    </li>
</ul>

CSS:

.empresaMenusEsq{
    width: 228px;
    height: 145px;
    padding-left: 10px;
    padding-top: 15px;
    background-color: white;
}
.empresaMenusEsq li h3{
    font-family: "Open-Sans-SemiBold";
    font-size: 15px;
    color: #333333;
    margin-bottom: 10px;
}
.empresaMenusEsq li:hover{display: block;}
.empresaMenusEsqHover{
    background-image: url("../imagens/empresaMenusEsq.png");
    background-repeat: no-repeat;
    position: absolute;
    width: 248px;
    height: 29px;
}

1 Resposta 1

3

Você tem a ordem trocada, deve ser li:hover .empresaMenusEsqHover e não .empresaMenusEsqHover li:hover, e tem de fazer override com !important uma vez que aplicou o display: none diretamente no elemento.

li:hover .empresaMenusEsqHover  {
    display: block !important;
}

jsFiddle

À esquerda tem os parentes, para a direita tem os descendentes. Assim, o ultimo à direita deve ser a div com a classe empresaMenusEsqHover, e o :hover é feito sobre o li que está visivel. O importante aqui é usar o !important.

Ou melhor, se puder tire o diplay: none; do HTML e coloque:

li .empresaMenusEsqHover  {
    display: none;
}

para esconder, e o código em cima para o :hover. Se usar só CSS como sugiro aqui, pode tirar o !important. Se não conseguir mudar o HTML, tem de o usar.

4
  • No meu caso seria .empresaMenusEsq ul li h3:hover .empresaMenusEsqHover{display: block;} ? Commented 22/09/2014 às 18:34
  • @FelipeStoker, juntei mais info à resposta. Respondeu à pergunta que colocou aqui no comentário?
    – Sergio
    Commented 22/09/2014 às 18:48
  • Deu certo @Sergio, muito obrigado Commented 22/09/2014 às 19:16
  • 1
    @FelipeStoker, exato! Vai ter de fazer ajustes à altura, e ter algum texto para mostrar, agora está vazio. mas é isso. jsfiddle.net/Le7ckme0/2
    – Sergio
    Commented 22/09/2014 às 19:16

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 .