我有这个HTML:
<div class="caption">
<h2><a href="single-image.html">Sun Flower</a></h2>
<p class="meta-info-font">I took this photo at some bla bla bla.. and some other stuff.</p>
</div>
为什么这不起作用:
.caption {
position: absolute;
top: 40%;
left: 0;
right: 0;
background-color: rgba(20,19,19,0.94);
display: none;
}
.caption:hover {
display: block;
}
答案 0 :(得分:3)
.caption {
position: absolute;
top: 40%;
left: 0;
right: 0;
background-color: rgba(20,19,19,0.94);
display: block; /* HERE */
}
.caption:hover {
display: none; /* HERE */
}
默认情况下,您的div只是隐藏了。
答案 1 :(得分:0)
尝试
.caption {
position: absolute;
top: 40%;
left: 0;
right: 0;
background-color: rgba(20,19,19,0.94);
display: block;
}
.caption:hover {
display: none;
}
答案 2 :(得分:0)
尝试更改此内容:
.caption {
position: absolute;
top: 40%;
left: 0;
right: 0;
background-color: rgba(20,19,19,0.94);
display: block;
}
.caption:hover {
display: none;
}
你的div必须是display:block,所以当你将它悬停在它上面时,它可以显示:none
答案 3 :(得分:0)
我尝试在chrome和FireFox中检查CSS,但它似乎与浏览器不兼容。为什么不写一些javascript哟隐藏它在悬停..