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

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>