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

这只是一件非常小的事情。你的选择器错了。它应该是：

.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的孩子一样

Answer 2

您可以使用兄弟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 3

你的陈述中缺少一个加号

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>

：悬停效果不起作用

3 个答案: