Display when applying Hover via CSS

Question

Display when applying Hover via CSS

Navigation

#1 by (2 votes)

1

I want, when I hover over the li , the div companyMenusEsqhover stays as display:block . I can do this in Jquery, however, I want to do as much as I can via CSS.

I have 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;
}

css

asked by anonymous 22.09.2014 / 19:48

1 answer

Mallocation fault in malloc () function Appear menu with ng-click + ng-class

score 2 · Accepted Answer

You have the command changed, it must be li:hover .empresaMenusEsqHover and not .empresaMenusEsqHover li:hover , and you must override !important since you have applied display: none directly to the element.

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

jsFiddle

On the left have relatives, to the right have the descendants. So the last right should be the div with class empresaMenusEsqHover , and :hover is done on the li that is visible. The important thing here is to use !important .

Or rather, if you can take out diplay: none; of HTML and put:

li .empresaMenusEsqHover  {
    display: none;
}

to hide, and the code above for :hover . If you use CSS only as I suggest here, you can get !important . If you can not change the HTML, you have to use it.