您可以在此处访问该站点（单击“投资组合”以转到此问题的相关部分）。
我正在尝试设置将鼠标悬停在图像上时显示的标题。我对图像以及文本进行了格式化，使其在悬停时显示。我将div的可见性设置为hidden，并使用hover标签使其可见，但它拒绝在悬停时重新出现。如何在悬停时使div实际出现？
这是我的HTML（仅是简短的帖子）
<li>
<a href="#openModal1">
<div class="imgwrap">
<img src="portfolio_images/poster.png">
<div class="textwrap"><p class="imgdes">Pedalfest Poster</p></div>
</div>
</a>
</li>
和CSS
.imgwrap {
height:150px; width:150px;
}
.textwrap {
position:absolute;
width:150px; height:30px;
background-color:#727272;
margin-top:-30px;
visibility: hidden;
}
.imgdes {
text-align:center; font-family: Droid serif, serif;
font-weight:500; font-size:14px;
line-height:30px;
text-decoration:none; color:#f7f7f7;
top:50%;
}
.textwrap:hover {
visibility: visible;
}
将鼠标悬停在容器上时，请尝试更改可见性。您可以执行以下操作：
.imgwrap:hover .textwrap {
visibility: visible;
}
您只需将鼠标悬停在imgwrap类上即可控制的属性textwrap。本质上，您只是将鼠标悬停在父对象上，然后指定一个子对象；在这种情况下，textwrap。由于您无法将鼠标悬停在隐藏的元素上，因此我们将鼠标悬停在其父元素上，这是我们希望能够悬停在其上的区域。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句