Как изменить css одного класса при зависании над другим?

Question

Я новичок в css особенно комбинаторах, но я пытаюсь изменить css элемента ap при наведении на элемент h1, оба из которых находятся в div класса «a» , но я не могу понять, как это сделать. Вот мой код

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: парить элемент, где родитель является DIV с классом «в»

+ p для выбора элемента р, которые помещены сразу после h1: зависать element

Answer 3

Если вы используете jQuery, вы можете использовать следующий код для преобразования абзаца.

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