0

ユーザーがカーソルを合わせるまで、ヘッダーを除く特定の要素内のすべてを非表示にするCSS3ルールがあります。どちらの方法がより良い選択でしょうか? この場合、CSS2.1 との下位互換性については心配していません。

アイデア1

SECTION FIGURE.collapsed:not(:hover) *:not(H1):not(H2):not(H3):not(H4):not(H5):not(H6){
    display:none;
}

利点: 1 つのセレクターですべてを実行

短所：不安定に見えて、ちょっとあいまいな気がする

アイデア2

SECTION FIGURE.collapsed *{
    display:none;
}
SECTION FIGURE.collapsed:hover *{
    display:initial;
}


SECTION FIGURE.collapsed H1,
SECTION FIGURE.collapsed H2,
SECTION FIGURE.collapsed H3,
SECTION FIGURE.collapsed H4,
SECTION FIGURE.collapsed H5,
SECTION FIGURE.collapsed H6{
    display:block;
}

長所:クラシック CSS の方が理解しやすい

短所:以前に設定したスタイルをオーバーライドします。display:initial;動作しますが、有効な CSS ではないようです。

4

2 に答える 2

1

私はあなたが持っているものの組み合わせが最善だと思います。を実行することで削除できますが、display: initialすべて:not(:hover)の見出し要素をリセットします（通常はdisplay: blockとにかくそうだったでしょう。

更新：すべてに追加してセレクターの特異性を高めるために必要です:not(:hover)。フィドルを参照してください。（注：h2.1タグは、[これはBoltClockが彼の議論で指摘したものです]の中にあるため、まだ非表示になっています）。div

SECTION FIGURE.collapsed:not(:hover) * {
    display:none;
} 

SECTION FIGURE.collapsed:not(:hover) H1,
SECTION FIGURE.collapsed:not(:hover) H2,
SECTION FIGURE.collapsed:not(:hover) H3,
SECTION FIGURE.collapsed:not(:hover) H4,
SECTION FIGURE.collapsed:not(:hover) H5,
SECTION FIGURE.collapsed:not(:hover) H6{
    display:block;
}
于 2013-01-30T20:00:25.307 に答える
1

これを行う最良の方法は、ヘッダー以外のコンテンツを何らかの形式のコンテナーにカプセル化することです。場合によっては、おそらくdivまたはHTML5セマンティックコンテナです。これらのコンテンツコンテナにクラスを適用してから、1つの短い単一のクエリを使用してこのコンテンツを非表示にします。コンテナを非表示にするとその内容が自動的に非表示になるため、追加のマークアップがほとんどない、短く、シンプルで、最も重要なことを理解できるソリューションが得られます。

これを行うことは、CSSを厳密に使用したいという当初の要望から逸脱することを最初に述べたはずです。ここでは、JavaScriptを使用してイベントを処理し、CSSを使用して情報の表示と非表示を管理します。ヘッダーのCSSでコンテンツのスタイルを決定するよりも、これがすっきりしていると思いますが、それは私だけです。

とにかく、これの非常に単純な実装は次のようになります。これを実装する場合は、リファクタリングしてより堅牢にする必要があります（2番目の子を使用することは、リファクタリングにあまり対応していません）が、アイデアは得られます。

<div id="wrapper">
    <h1>Content</h1>
    <div style="display: none">
        This is some hidden content
    </div>
</div>

document.getElementById("wrapper").onmouseenter = function () {
    this.children[1].style.display = "block";
};

document.getElementById("wrapper").onmouseleave = function () {
    this.children[1].style.display = "none";
};
于 2013-01-30T19:42:34.107 に答える