当鼠标悬停在另一个元素上时隐藏元素

Question

我知道这可以用 JavaScript 实现，但是我正在寻找 CSS 的解决方案。

我有三个 div。

• div#hide 默认情况下应该可见，#show 应该隐藏。
• 当我将鼠标悬停在 #main 上时，#hide 应该被隐藏，#show 应该可见。

div#show 没问题，但是当鼠标悬停在 #main 上时，#hide 没有被隐藏。我们怎样才能用 CSS 实现呢？

#show {
  display: none
}
#main:hover + #show {
  display: block
}
#main:hover + #hide {
  display: none
}

<div id="main">
  Hover me
</div>
<div id="show">
  Show me on hover
</div>
<div id="hide">
  Hide me on hover
</div>

- Imad

---

去查一下选择器中的 + 是什么意思。在这个过程中，你也应该找到它的更一般的对应物。 - CBroe

https://fiddle.jshell.net/393wqmwp/1/ - Hastig Zusammenstellen

Answer 1

你需要使用~选择器来隐藏元素，而不是+选择器，因为+只能选择下一个兄弟元素。

#show {
  display: none
}
#main:hover + #show {
  display: block
}
#main:hover ~ #hide {
  display: none
}

<div id="main">
  Hover me
</div>
<div id="show">
  Show me on hover
</div>
<div id="hide">
  Hide me on hover
</div>

- Nenad Vracar

Answer 2

你只需要用~替换+选择器，因为#hide不在#main之后。

所以你的代码是：

#show {display:none}
#main:hover + #show { display:block }
#main:hover ~ #hide { display:none }

- Humble Potato II

Answer 3

在这种情况下，您必须使用波浪符号“~”。

“+”和“~”之间的区别在于，“~”匹配所有后续兄弟元素，无论它们与第一个元素的距离如何，只要它们共享相同的父元素。

    #show {display:none}
    #main:hover + #show { display:block }
    #main:hover ~ #hide { display:none }

- Shuvo Habib

Answer 4

尝试这样写："#main:hover + #show + #hide"。

div#show {
    display:none;
}
#main:hover + #show {
    display:block 
}
#main:hover + #show + #hide {
    display:none
}

对我来说它是有效的。

- Mukesh Ram