在其他元素悬停时隐藏元素 [英] Hide element on hover of another element

问题描述

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

I know it can be done in JavaScript, however I am looking for solution in CSS.

我有3个div。

• div＃hide应该默认可见，＃show应该是隐藏的。


• 当我将鼠标悬停在#main上，#hide应该隐藏，并且#show应该可见。

div＃show可以正常工作，但是#hide不能当#main悬停时隐藏。

div#show works fine but #hide doesn't hide when #main is hovered. How can we do it in 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>

推荐答案

您想使用〜组合器代替 + 进行隐藏元素，因为 + 仅选择下一个同胞

Instead of + you want to use ~ combinator for hide element because + selects only next-sibling

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

这篇关于在其他元素悬停时隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！