兄弟のホバーに要素を表示するにはどうすればよいですか？

Question

私はCSSセレクタをテストしています。私はh3を置くとpの表示を変更したいので、私のようなものを書いた：

div > p{ 
 
    display: none; 
 
} 
 

 
div > h3:hover p{ 
 
    display: block; 
 
}

<div> 
 
    <h3>Lorem ipsum dolor sit amet</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>

をしかし、それは動作しません。これは間違っていますか？私は何が欠けていますか？

Answer 1

h3 pをおさらいする+adjacent sibling selector

div > p { 
 
    display: none; 
 
} 
 

 
div > h3:hover + p { 
 
    display: block; 
 
}

<div> 
 
    <h3>HOVER ME</h3> 
 
    <p>Lorem ipsum dolor sit amet...</p> 
 
</div>

を使用して... pはh3
h3 + pの子孫であることを意味... pはすぐに次の兄弟であることを意味しますh3

---

あなたが

div > p { 
 
    display: none; 
 
} 
 
div > h3:hover ~ p { /* notice the general sibling selector */ 
 
    display: block; 
 
} 
 

 
.line{background: red; height: 1px; }

<div> 
 
    <h3>HOVER ME</h3> 
 
    <div class="line"></div> 
 
    <p>Lorem ipsum dolor sit amet...</p> 
 
</div>

ように役立つだろうGeneral sibling selector ~よりh3とpの間に、他の要素を持つことが近い将来に予定している場合

Answer 2

あなたはを使用することができます隣接する兄弟セレクタ（+）はdiv > h3:hover + pです。以下

参照のデモ：

div>p { 
 
    display: none; 
 
} 
 

 
div>h3:hover+p { 
 
    display: block; 
 
}

<div> 
 
    <h3>Lorem ipsum dolor sit amet</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>