Question

在我的WordPress网站上，我显示了链接到不同帖子的不同图像，当您将鼠标悬停在图像上时，绿色框覆盖图像，并且框中会显示白色文本（有关帖子的信息）。出于某种原因，这仅适用于6/7的图像。正在从数据库中正确地提取需要显示的信息，但由于某种原因它只是没有显示。这就是我在PHP模板中使用它来显示图像和信息：

<a href="<?php echo $link; ?>">
<div id="home-overlay-outer">
   <div class="home-overlay">
       <h1><?php echo $title; ?></h1>
       <p><?php echo $location; ?> &mdash; <?php echo $specifics; ?></p>
   </div>
</div>
</a>
<img src="<?php echo $image; ?>">

This is what happens when you hover over the image

我不知道在其他所有图片上工作正常时会导致什么。

用于悬停和框的CSS：https://jsfiddle.net/5w3svfoc/

Answer 1

在我看来，你正在使用ID作为选择器。在这种情况下，您应该使用基于类的选择器。这可以解释6/7问题。此外，您不应在:hover的元素上使用display: none;选择器。考虑将悬停选择器放在父级上，并确保它具有宽度和高度。根据悬停选择器切换内容显示，但不切换悬停元素本身。

.hover-images .image {
  width: 50%;
  float: left;
  height: 200px;
}

.hover-images .hover-content {
  display: none;
  height: 100%;
  width: 100%;
  background: black;
}
.hover-images .hover-show-content:hover .hover-content {
  display: block;
}

<div class="hover-images">
  <div id="hover1" class="image hover-show-content">
    <div class="hover-content"></div>
  </div>
  <div id="hover2" class="image hover-show-content">
    <div class="hover-content"></div>
  </div>
</div>

在悬停时不显示内容

1 个答案: