如何顯示一個元素懸停的兄弟姐妹？

我一直在測試CSS選擇器。我想改變的p顯示，當我將鼠標懸停在h3，所以我寫了類似：如何顯示一個元素懸停的兄弟姐妹？

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>

，但它不工作。這是什麼錯誤？我錯過了什麼？

來源

2017-09-04 Rıfat Tolga Kiran

@kukkuz你不必是最近編輯得到朝照明徽章進步，只是* *的編輯器。另外，問題中的「但」不是句子的開頭，所以不應該大寫。 – TylerH

@TylerH不打算成爲最近的編輯......我想'但'必須大寫..好吧，讓它成爲:) – kukkuz

使用+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>

回顧一下
h3 p ...含義p是h3
h3 + p後裔...含義p是立即下一個兄弟的h3

如果在不久的將來計劃有比General sibling selector ~h3和p之間，其他元素將幫助像

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>

來源

2017-09-04 16:38:49

可以使用相鄰兄弟選擇器（+），如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>

來源

2017-09-04 16:39:35 kukkuz

如何顯示一個元素懸停的兄弟姐妹？

回答

相關問題