web-dev-qa-db-ja.com

CSSでdivを表示および非表示にする方法は？

私のスクリプトには3つのdivがあります。 1行目にホバーするときにclass="ab"でdivを表示し、2行目にホバーするときにclass="abc"でdivを表示したい。そうでない場合、デフォルトでclass="a"を使用してdivを表示します。

ただし、class="a"でdivを表示することはありません。

.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 Link

csscss3htmlhoversiblings
41
mridul

あなたが必要

.abc,.ab {
    display: none;
}

#f:hover ~ .ab {
    display: block;
}

#s:hover ~ .abc {
    display: block;
}

#s:hover ~ .a,
#f:hover ~ .a{
    display: none;
}

でデモを更新 http://jsfiddle.net/gaby/n5fzB/2/

元のCSSの問題は、cssセレクターの,が完全に新しいセレクターを開始することでした。結合されません。したがって、#f:hover ~ .abc,.aは#f:hover ~ .abcと.aを意味します。これをdisplay:noneに設定したため、すべての.a要素に対して常に非表示に設定されていました。

38
Gabriele Petrioli

要素を非表示にするには、次を使用します。

display: none;
visibility: hidden;

要素を表示するには、次を使用します。

display: block;
visibility: visible;

違いは：

可視性はタグの可視性を処理し、displayはページ上の占有スペースを処理します。

visibilityを設定し、displayを変更しない場合、タグが表示されていなくても、まだスペースを占有しています

43
multiplatform

要件に応じて、次の5つの方法のいずれかを使用して要素を非表示にすることができます。

Opacity

.hide {
  opacity: 0;
}

可視性

.hide {
   visibility: hidden;
}

表示

.hide {
   display: none;
}

ポジション

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

クリップパス

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

表示するには、次のいずれかを使用します：opacity：1;visibility：visible;display：block;

ソース： https://www.sitepoint.com/five-ways-to-hide-elements-in-css/

10
Aamer Shahzad

HTMLコード：

    <a id="f">Show First content!</a>
    <br/>
    <a id="s">Show Second content!!</a>
    <div class="a">Default Content</div>
    <div class="ab hideDiv">First content</div>
    <div class="abc hideDiv">Second content</div>

スクリプトコード：

$(document).ready(function() {
    $("#f").mouseover(function(){
        $('.a,.abc').addClass('hideDiv');
        $('.ab').removeClass('hideDiv');
    }).mouseout(function() {
        $('.a').removeClass('hideDiv');
        $('.ab,.abc').addClass('hideDiv');
    });

    $("#s").mouseover(function(){
        $('.a,.ab').addClass('hideDiv');
        $('.abc').removeClass('hideDiv');
    }).mouseout(function() {
        $('.a').removeClass('hideDiv');
        $('.ab,.abc').addClass('hideDiv');
    });
});

cSSコード：

.hideDiv
{
    display:none;
}
0
Abhishek Mungekar