私のスクリプトには 3 つの div があります。class="ab"最初の行にマウスを移動したときに div を表示し、2 行目にマウスを移動したときに div を表示したいと思います。それ以外の場合は、デフォルトclass="abc"で div を表示したいと思います。class="a"
しかし、 の div は表示されませんclass="a"。
.abc,.ab {
display: none;
}
#f:hover ~ .ab {
display: block;
}
#f:hover ~ .abc,.a {
display: none;
}
#s:hover ~ .abc {
display: block;
}
#s:hover ~ .ab,.a {
display: none;
}<a id="f">Show First content!</a>
<br/>
<a id="s">Show Second content!!</a>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>私の問題に対する JSFiddle は次のとおりです:JSFiddle リンク
ベストアンサー1
要素を非表示にするには、次を使用します。
display: none;
visibility: hidden;
要素を表示するには、次を使用します。
display: block;
visibility: visible;
違いは次のとおりです。
Visibility はタグの可視性を処理し、displayページ上でタグが占めるスペースを処理します。
を設定しvisibility、を変更しない場合displayは、タグが表示されなくても、それはまだスペースを占有します。