javascript - 悬停在另一个类上时如何更改一个类的CSS？

Question

我是 css 的新手，尤其是组合器，但是当我将鼠标悬停在 h1 元素上时，我试图更改 p 元素的 css，这两个元素都在类“a”的 div 中 但我不知道该怎么做。这是我的代码

HTML

<div class="a">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</div>

CSS

div.a h1:hover ~ div.a p {color:red;}

那我做错了什么？

Answer 1

您不需要定位 div再次元素。

所有段落 JsFiddle Demo

第一段 Jsfiddle Demo

div.a h1:hover~p{color:red;}

<div class="a">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
<p>Some other text.</p>

如果您只想定位第一个 <p>段落标签，然后你可以使用

div.a h1:hover+p{color:red;}

<div class="a">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>

如果您对上述源代码有任何疑问，请在下方留言，我会尽快回复您。

希望对您有所帮助。编码愉快!