他の要素のホバー上の要素を非表示

Question

JavaScriptで行うことができますが、私はCSSの解決策を探しています。

私には3つのdivがあります。

• div＃hideは、デフォルトで表示されるはずです。#showは非表示にする必要があります。
• #mainにカーソルを置くと、#hideが非表示になり、#showが表示されるはずです。

div＃showはうまく動作しますが、#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

代わりの+あなたは+は、あなただけの時間だけ次の兄弟

#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

を選択するのでhide要素の~コンビネータを使用したいですあなたはこのような場合のために「〜」ティルダを使用するようにしました

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

Answer 3

：#main

は、だからあなたのコードは後#hide原因~で+セレクターを交換するaveの置かれていません。

+と〜の違いは、〜が同じ親を共有している限り、〜は最初の要素からの近接性にかかわらず、後続のすべての兄弟にマッチすることです。 "#main：：ホ​​バー+ #show + #hide"

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

それは私のために働いて

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

Answer 4

はこのような何かを試してみてください。