Html 悬停时的 CSS 显示块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13211822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS display block on hover
提问by user1355300
I've following HTML, the div .infohas display:noneby default, I want to change that to display:blockon hover. I'm trying following CSS but the :hoverdoes not work.
我遵循 HTML，默认情况下div.info具有display:none，我想将其更改为display:block悬停。我正在尝试遵循 CSS 但:hover不起作用。
HTML:
HTML：
<div id="items">
<div class="item">
<a href="#">
<div clas="info">
</div>
</a>
</div>
</div>
CSS
CSS
#items .item a .info{
display: none;
}
#items .item a .info:hover{
display: block;
}
JSFiddle:http://jsfiddle.net/qcDtF/
JSFiddle：http : //jsfiddle.net/qcDtF/
Thanks.
谢谢。
回答by Jeff Gortmaker
You cannot hover over something that is not displayed. You could use opacityor visibilityinstead. jsFiddle.
您不能将鼠标悬停在未显示的内容上。您可以改用不透明度或可见性。js小提琴。
.info {
opacity: 0;
}
.info:hover {
opacity: 1;
}
Alternatively, if you really want to use display:none, then give #items, .item, or your outer aa set width and height, and place the :hoveron that element. jsFiddle. For example:
或者，如果您真的想使用display:none，则给#items、.item或您的外部a设置一个宽度和高度，然后将:hover放在该元素上。js小提琴。例如：
#items{
width: 20px;
height: 20px;
}
.info{
display: none;
}
#items:hover .info {
display: block;
}
If you want the correct widthand height, you can use javascript/jQuery to get the width/height of a visible .info, hide .info, and then set the height/width of #itemsto those values gotten from .info.
如果你想要正确的widthand height，你可以使用 javascript/jQuery 来获取一个 visible .info、 hide的宽度/高度.info，然后将 的高度/宽度设置为#items从.info.
回答by NullPoiиteя
you have not display the content in info its not possible to hover the hidden
您尚未在信息中显示内容，因此无法悬停隐藏的
you can do something like this
你可以这样做此
<div id="items">
<div class="item">
<a href="#">sd
<div class="info">
asdf
</div>
</a>
</div>
</div>
css
css
#items .item a .info{
display: none;
}
#items .item a:hover .info{
display: block;
}
you can not do this by hover but you can change the opacity on hover so it feels like it will hide and show as the user @jeff gortmaker says
您不能通过悬停来执行此操作，但您可以更改悬停时的不透明度，因此感觉它会像用户@jeff Gortmaker 所说的那样隐藏和显示
aslo
阿斯洛
if you have jquery as option then you can do this like
如果你有 jquery 作为选项，那么你可以这样做
$('.info').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
回答by dfsq
Use visibilityinstead of display:
使用visibility代替display：
#items .item .info {
visibility: hidden;
}
#items .item:hover .info {
visibility: visible;
}?
