隐藏另一个元素悬停的元素

Question

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

我有三个div。

• div＃hide应该是默认可见的，#show应该被隐藏。
• 当我将鼠标悬停在#main上时，＃隐藏应该隐藏并且#show应该可见。

div＃显示正常，但当#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>

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>

Answer 2

你刚才^ h

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

Answer 3

您对使用蒂尔达“〜”这种情况：AVE与~原因#hide更换+选择后#main

所以你的代码是没有放置。

+和〜之间的差异是〜匹配所有后续兄弟，无论它们与第一个元素的邻近程度如何，只要它们共享相同的父级。

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

Answer 4

尝试是这样的： “#main：悬停+ #show + #hide”

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

它为我工作。