html - 悬停时的 CSS 显示 block

Question

我遵循 HTML，div .info 默认有 display:none，我想将其更改为 display:block悬停。我正在尝试遵循 CSS，但 :hover 不起作用。

HTML:

<div id="items">
    <div class="item">
        <a href="#">
            <div clas="info">

            </div>
        </a>
    </div>
</div>

CSS

#items .item a .info{
    display: none;
}

#items .item a .info:hover{
    display: block;
}

JSFiddle: http://jsfiddle.net/qcDtF/

谢谢。

Answer 1

您不能将鼠标悬停在未显示的内容上。你可以使用 opacity或 visibility反而。 jsFiddle .

.info {
   opacity: 0;
}

.info:hover {
    opacity: 1;
}

或者，如果您真的想使用display:none，则提供#items、.item 或您的外部 a 设置宽度和高度，并将 :hover 放在该元素上。 jsFiddle .例如:

#items{
    width: 20px;
    height: 20px;
}


.info{
    display: none;
}


#items:hover .info {
     display: block;  
}

如果您想要正确的宽度和高度，您可以使用javascript/jQuery来获取可见.info的宽度/高度, 隐藏 .info，然后将 #items 的高度/宽度设置为从 .info 中获取的值。