将鼠标悬停在另一类上时如何更改它的CSS？

Question

I am new to css especially combinators but I am trying to change css of ap element when hovering over a h1 element both of which are in a div of class "a" but I can't figure out how to do it.Here is my code

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

So what am I doing wrong?

Answer 1

You don't need to target the div element again.

All Paragraphs JsFiddle Demo

First Paragraph 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> 

If you only want to target the first <p> paragraph tag then you can use

 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> 

If you have any questions about the source code above please leave a comment below and I will get back to you as soon as possible.

I hope this help. Happy coding!

Answer 2

This solution should work :

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

> h1:hover to select h1:hover element where the parent is div with class 'a'

+ p to select p element that are placed immediately after h1:hover element

Answer 3

If you are using jQuery you may use the following code to transform the paragraph.

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