Question

我还遇到了CSS :hover伪选择器的另一个问题。当你将鼠标悬停在一个链接上时，我试图显示一个图像，但我无法让它工作。

HTML：

＆＃13;

#underTitle {
  white-space: nowrap;
  font-size: 20px;
  color: white;
  padding: 50px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#underTitle a {
  color: #ffffff;
  text-decoration: none;
  transition: 1s;
}

#logovAlign {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

#underTitle a:hover+#logovAlign {
  color: #009999;
  opacity: 1;
}

＆＃13;

<div class="underTitle" id="underTitle">
  <h2><a href="index.html">Welcome to my Homepage</a></h2>
  <img src="images/faviconp.png" width="50" height="50" alt="Lighting Bolt Logo" id="logovAlign">
</div>

＆＃13;

Answer 1

删除锚标记周围的h2标记。 “+”运算符仅适用于下一个兄弟。

有关详情https://www.w3schools.com/cssref/sel_element_pluss.asp

，请参阅此链接

：悬停显示隐藏的图片

1 个答案: