Html 使用CSS使一个对象上的悬停影响另一个对象

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

HTML

除非我在

和

之间添加了一些内容，否则这很好用。我知道这是因为我使用的CSS选择器（

+

）。如何使用一个标记上的事件来改变另一个标记上的CSS

您可以使用

~

选择器而不是

+

选择器，如下所示：

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

您可以阅读有关不同CSS同级选择器的更多信息。

请尝试此选项

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

悬停在我身上
#壁球{
显示：无；
}
#悬停：悬停#挤压{
显示：块；
}

取决于您在这两部分之间添加了什么。如果文本将壁球包裹在

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

---

你的意思是#hover:hover{background image:url….}而不是在div中使用吗？@Keith我不这么认为。我发布的JSFIDLE中的行为是正确的。有没有一种方法可以让它继续工作，比如说在这种情况下，图像放在哪里？遗憾的是，没有以前的兄弟选择器。它必须在元素后面。那不行。您不能将

div

放在

p

中，因此代码无法按预期工作。在发布解决方案之前，请检查它们是否有效。

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

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

#hover:hover + p #squash {