html - 在悬停另一个元素时隐藏元素

Question

我知道这可以在 JavaScript 中完成，但是我正在寻找 CSS 中的解决方案。

我有三个 div。

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

div#show 工作正常，但#hide 在#main 悬停时不会隐藏。我们如何在 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>

Answer 1

而不是 + 你想为 hide 元素使用 ~ 组合器，因为 + 只选择下一个兄弟

#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>