css - 在 div 上使用悬停不起作用

Question

您可以访问网站here (点击“作品集”进入该问题的相关部分)。

我正在尝试设置将鼠标悬停在图像上时显示的标题。我格式化了图像以及悬停时出现的文本。我将 div 的可见性设置为隐藏并使用悬停标签使其可见，但它拒绝在悬停时重新出现。如何让 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;
}

Answer 1

尝试将鼠标悬停在容器上时更改可见性。你可以这样做:

.imgwrap:hover .textwrap {
     visibility: visible;
}

您只需将鼠标悬停在 imgwrap 类上即可控制 textwrap 的属性。本质上，您只是将鼠标悬停在父项上，然后指定一个子项；在本例中，textwrap。由于您不能将鼠标悬停在隐藏的元素上，我们将鼠标悬停在它的父元素上，这是我们无论如何都希望能够悬停的区域。