：懸停效果不起作用

Question

我使用FoundationPress https://foundationpress.olefredrik.com/ 來製作一個網站。我試圖通過懸停在另一個div上來切換div的顯示。這裏是造型：

.test_div { 
background-color:blue; 
height:50px; 
display:none; 
} 

.test_button { 
width:100px; 
height:50px; 
background-color:blue; 
cursor:pointer; 
} 

.test_button:hover { 
background-color:green; 
} 

.test_button:hover .test_div { 
background-color: red; 
display:block; 
} 

這裏是HTML：

<div class='test_button'>Hover to change test_div</div> 
<div class='test_div'>I should be displayed</div> 

它只是將無法工作。 謝謝。

Answer 1

您可以使用兄弟姐妹選擇器~。
請注意，這兩個元素應該是兄弟姐妹（具有相同的父代）並且第一個應該出現在DOM樹的第二個之前。

.test_div { 
 
background-color:blue; 
 
height:50px; 
 
display:none; 
 
} 
 

 
.test_button { 
 
width:100px; 
 
height:50px; 
 
background-color:blue; 
 
cursor:pointer; 
 
} 
 

 
.test_button:hover { 
 
background-color:green; 
 
} 
 

 
.test_button:hover ~ .test_div { 
 
background-color: red; 
 
display:block; 
 
}

<div class='test_button'>Hover to change test_div</div> 
 
<div class='test_div'>I should be displayed</div>

Answer 2

你缺少一個加在發言

nonte這隻能如果元素的下一個兄弟

.test_div { 
 
background-color:blue; 
 
height:50px; 
 
display:none; 
 
} 
 

 
.test_button { 
 
width:100px; 
 
height:50px; 
 
background-color:blue; 
 
cursor:pointer; 
 
} 
 

 
.test_button:hover { 
 
background-color:green; 
 
} 
 

 
.test_button:hover + .test_div { 
 
background-color: red; 
 
display:block; 
 
}

<div class='test_button'>Hover to change test_div</div> 
 
<div class='test_div'>I should be displayed</div>

Answer 3

缺少一件很小的事情。你的選擇器是錯誤的。它應該是：

.test_button:hover + .test_div { 
    background-color: red; 
    display:block; 
} 

小提琴：https://jsfiddle.net/8rtjzmw6/

你需要的是一個所謂的相鄰兄弟選擇，看到https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors 它可以讓你選擇下一個元素。

與.test_button:hover .test_div您選擇它喜歡test_div將是test_button