：悬停效果不起作用

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

您可以使用同级 css 选择器 ~。
请注意，这两个元素应该是兄弟姐妹（具有相同的父元素）并且第一个元素应该出现在 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

你的陈述中少了一个加号

仅当该元素是下一个同级元素时才有效

.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

只是少了一个很小的东西。您的 selector 是错误的。应该是：

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

Fiddle: https://jsfiddle.net/8rtjzmw6/

您需要的是所谓的相邻兄弟select或，参见https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors 它允许您 select 下一个元素。

用 select 或 .test_button:hover .test_div 你 select 编辑它就像 test_div 将是 test_button[=16= 的 child ]

：悬停效果不起作用

:hover effects not working

css

zurb-foundation