：悬停效果不起作用

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