Question

您可以访问网站here（点击＆＃34;投资组合＆＃34;点击此问题的相关部分）。

我正在尝试设置标题，以便在图像悬停时显示。我格式化了图像以及悬停时出现的文本。我将div的可见性设置为隐藏，并使用悬停标记使其可见，但它在悬停时拒绝重新出现。如何让div实际出现在悬停状态？

这是我的HTML（只是保持帖子简短的第一个li）

<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。由于您不能将鼠标悬停在隐藏的元素上，因此我们将鼠标悬停在其父级上，这是我们希望能够悬停的区域。

使用悬停在不工作的div上

1 个答案: