1

次の HTML 構造がありますか?

<div id="content">

    <h3>some text</h3> <!--Another element having <h3> markup-->

    <div class="abc"> <!--This DIV does not have any id-->
        <div/>
        <h3>some text</h3>
    </div>
</div>

そして次のCSSコード

#content h3:hover, #content .abc:hover
{
    background-color:#F0F0F0;
    background-image:url('/images/flag.gif');
    background-repeat:no-repeat;
    background-position:left center;
}

私が直面している問題:

マウスを<h3>下に置く<div id="content">と、期待どおりに CSS が適用されます。しかし、マウスを に合わせると、下の要素だけでなく<div class="abc">両方に CSS が適用されます。そのため、マウス ホバーで 2 つの画像が表示されます。<div class="abc"><h3><div class="abc">

この動作を制御できますか?

マウスを<h3>of<div class="abc">に合わせると、背景画像が 1 つだけ表示され、2 度表示されることはありませんか?

どうすればこれを達成できますか？CSS のみを使用するか、jQuery を使用する必要がありますか?

4

3 に答える 3

3

これを試して：

#content > h3:hover, #myOutput > .abc:hover

こちらがコードペンです。

コードは子孫セレクター (単なるスペース) を使用しているため、両方の要素を含むh3の子孫である任意の要素にホバー スタイルを適用するようにブラウザーに指示しています。ここにあるコードは、指定された親の直接の子孫である要素のみを指定する子コンビネーター セレクター ( ) を使用します。#contenth3>

混乱している？これを読む。

于 2013-10-29T06:27:46.880 に答える
2

に変更#content h3:hoverし#content > h3:hoverます。

問題は、2 番目も<h3>の子である#contentため、ルールが適用されることです。を使用すると、 の直接の子である>のみを選択できます。<h3>#content

于 2013-10-29T06:29:04.700 に答える
0

html を "

<h3>some text</h3> 
<div class="abc"> sdfdsf </div>
    <h3>some text</h3>

"

于 2013-10-29T07:16:59.980 に答える