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设置一个宽度和高度，并放置{{ 1}}关于那个元素。 jsFiddle。例如：

:hover

如果您想要正确的#items{ width: 20px; height: 20px; } .info{ display: none; } #items:hover .info { display: block; }和width，可以使用javascript / jQuery获取可见height的宽度/高度，隐藏.info，然后将.info的高度/宽度设置为从#items获得的值。

Answer 2

您没有在信息中显示内容，因此无法悬停隐藏的

您可以执行this

之类的操作

<div id="items">
    <div class="item">
        <a href="#">sd
            <div class="info">
                asdf
            </div>
        </a>
    </div>
</div>

CSS

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

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

你不能通过悬停来做到这一点，但你可以改变悬停时的不透明度，这样它就会隐藏并显示为用户@jeff gortmaker说

aslo

如果您有jquery作为选项，那么您可以像

那样执行此操作

$('.info').hover(function() {
    $(this).fadeTo(1,1);
},function() {
    $(this).fadeTo(1,0);
});

jsFiddle

Answer 3

使用visibility代替display：

#items .item .info {
    visibility: hidden;
}

#items .item:hover .info {
    visibility: visible;
}

http://jsfiddle.net/qcDtF/1/

悬停时的CSS显示块

3 个答案: