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的更多信息。

Answer 2

请试试这个

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

#squash {
  display: none;
}

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

Answer 3

取决于在两个部分之间插入的内容。如果文字将南瓜包裹在

内

<p> text here
    <div id="squash"...>
    </div>
</p>

然后将CSS更改为

#hover:hover + p #squash {

使用CSS导致在一个对象上悬停以影响另一个对象

3 个答案: