別のクラスにカーソルを置いたときにクラスのCSSを変更するには？

Question

私は特にコンビネータを追加するのは初めてですが、h1要素の上にカーソルを置いたときにap要素のCSSを変更しようとしていますが、両方とも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を選択するために：親がh1の直後に配置されている「」

+ p選択するためのp要素クラスとdiv要素である要素を置く：ホバー要素

Answer 3

jQueryを使用している場合は、次のコードを使用して段落を変換できます。

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