Question

我是css特别是组合器的新手，但是当我将鼠标悬停在一个h1元素上时，我试图改变一个p元素的css，这两个元素都在一个类的div中，并且＃34; a＆＃34; 但我无法弄清楚如何去做。这是我的代码

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>

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

我希望这有帮助。快乐的编码！

Answer 2

此解决方案应该有效：

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

> h1:hover选择h1：hover元素，其中父级为div，类为＆＃39; a＆＃39;

+ p选择紧跟在h1：hover元素

之后的p元素

Answer 3

如果您使用的是jQuery，可以使用以下代码转换段落。

$('div.a h1').hover(function() {
        $(this).siblings('p').css(color: red;);
    }, function() {
        $(this).siblings('p').css( << Previous Css >> );
    }
});

如何在悬停在另一个类上时改变一个类的css？

3 个答案: