Question

所以，我试图这样做，当我将鼠标悬停在图像上时，div会出现。不幸的是，我无法做到这一点，我不知道为什么它不起作用。

这是我的代码：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

所以你需要将.leftAlign（.summary的父母）悬停在.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的孩子，其中包含summaryOverlay类。 img不能拥有子元素，可以吗？即使可能，.summaryOverlay也不是它的孩子。所以，它不会像你想象的那样工作。试试这个：

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

除非出现任何CSS特性问题，否则应该给你想要的东西。让我知道它是怎么回事。

Div没有显示悬停？

2 个答案: