html - 使用 CSS 使悬停在一个对象上影响另一个对象

Question

使用纯 CSS，我希望在将鼠标悬停在文本上时显示图像:

HTML

<h1 id="hover">Hover over me</h1>
<div id="squash">
  <img src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%">
</div>

CSS

#squash {
  display: none;
}

#hover:hover + #squash {
  display: block;
}

这工作正常，除非我在 <h1> 之间放一些东西和 <div> .我知道这是因为我使用的 CSS 选择器 ( + )。我如何在一个标签上使用事件来导致另一个标签上的 CSS 发生变化？

JSFiddle

Answer 1

您可以使用 General Sibling Selector ~ 选择器而不是 Adjacent Sibling Selector + 选择器，像这样:

#hover:hover ~ #squash {
  display: block;
}

JSFiddle

您可以阅读更多关于不同 CSS 兄弟选择器的信息 here .