Div 悬停时不显示？

Question

因此，我正在努力做到这一点，因此当我将鼠标悬停在图像上时，div 会出现。不幸的是，我无法让它这样做，而且我不知道为什么它不起作用。

这是我的代码：

.summary:hover {
  opacity: .6;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

.summaryOverlay {
  position: absolute;
  margin-left: 5%;
  margin-top: 3%;
  height: 200px;
  width: 280px;
  z-index: 2;
  background-color: #E7DFDD;
  color: #0E0B16;
  font-family: Verdana;
  font-size: 15px;
  opacity: .9;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  text-align: center;
  display: none;
}

.summary:hover .summaryOverlay {
  display: block;
}

<div class="leftAlign" id="lastWish">
  <img class="summary" alt="the last wish" src="lastWish.jpg" style="width: inherit; height: inherit;" />
</div>
<div class="summaryOverlay">
  Geralt is a witcher.
  <br><br> &nbsp;Yet he is no ordinary killer-for-hire.
  <br><br> His sole purpose: to destroy the monsters that plague the world.
  <br><br> But not everything monstrous-looking is evil and not everything fair is good. . . and in every fairy tale there is a grain of truth.
</div>

Answer 1

因为 .summaryOverlay 不是 .summary 的 child，正如您在此处所述：

.summary:hover .summaryOverlay {
  display: block;
}

因此您需要将鼠标悬停在 .leftAlign（.summary 的 parent）中，这是 .summaryOverlay 兄弟，您需要使用 adjacent sibling selector +

注意：删除内联样式，使用它们是一种不好的做法

.summary:hover {
  opacity: .6;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

.summaryOverlay {
  position: absolute;
  margin-left: 5%;
  margin-top: 3%;
  height: 200px;
  width: 280px;
  z-index: 2;
  background-color: #E7DFDD;
  color: #0E0B16;
  font-family: Verdana;
  font-size: 15px;
  opacity: .9;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  text-align: center;
  display: none;
}

.leftAlign:hover + .summaryOverlay {
  display: block;
}

<div class="leftAlign" id="lastWish">
  <img class="summary" alt="the last wish" src="//placehold.it/100x100" />
</div>
<div class="summaryOverlay">
  Geralt is a witcher.
  <br><br> &nbsp;Yet he is no ordinary killer-for-hire.
  <br><br> His sole purpose: to destroy the monsters that plague the world.
  <br><br> But not everything monstrous-looking is evil and not everything fair is good. . . and in every fairy tale there is a grain of truth.
</div>

Answer 2

您的 CSS 是 而不是 要求浏览器按您的预期在将鼠标悬停在图像上时显示 div。相反，它要求浏览器显示 .summary 的 child，其中 class summaryOverlay。 img 不可能有 child 元素，对吗？就算可以，.summaryOverlay也不是它的child。所以，它不会像你预期的那样工作。试试这个：

#lastWish:hover + .summaryOverlay{
  display:block;
}

排除任何 CSS 特异性问题，它应该能满足您的需求。让我知道进展如何。

Div 悬停时不显示？

Div not showing on hover?

html

css

hover

display