Question

当我将鼠标悬停在标题<h1>标记上时，我正试图让图片显示出来。

到目前为止这是我的CSS：

    .certificate h1{
            text-align:left;
        }

    .certificate:hover, .certificate:hover img{
        visibility:visible;
        z-index:100;
    }

    .certificate img{
        visibility:hidden;
        position:absolute;
    }

以下是我的HTML

<div class="certificate">
    <h1>Title</h1>
</div>
<div class="certificate">
    <img src="./images/image.jpg">
</div>

出于某种原因，我的图像仍然显示出来。我检查是否悬停在正确的标签上？

Answer 1

因为悬停.certificate没有图片。将它们放在同一个容器中。此外，由于图片.container中唯一具有position: absolute图片的内容，因此它不会提供任何:hover空间。因此，从技术上讲，您无法悬停图片的父级。

＆＃13;

.certificate h1 {
  text-align: left;
}
.certificate:hover img {
  visibility: visible;
  z-index: 100;
}
.certificate img {
  visibility: hidden;
  position: absolute;
  left: 100px;
  top: 0;
}

＆＃13;

<div class="certificate">
  <h1>Title</h1>
  <img src="http://placehold.it/350x150">
</div>

＆＃13;

当我将鼠标悬停在标题

1 个答案: