2

私は以下のようなコードを持っています:

<nav id="mainNav" class="">
   <div id="navContainer">
       <div id="active">
           [ some list ]
       </div><!-- #active -->
   </div><!-- #navContainer -->
</nav><!-- #mainNav -->

ユーザーが #active にカーソルを合わせたときに #mainNav の背景色を変更したいのですが、どうすればよいかわかりません。私はこれをしましたが、結果はありません:

#active:hover #mainNav{
   background-color: #333;
}

何か案が？

4

5 に答える 5

3

JS を使用するか、別のアプローチを試してください。CSS のみ:

http://jsfiddle.net/coma/zxybD/5/

HTML

<div id="main">
    <a href="#" class="red">red</a>
    <a href="#" class="green">green</a>
    <a href="#" class="blue">blue</a>
    <div></div>
</div>

CSS

#main {
    position: relative;
}

#main > a {
    display: block;
    padding: .5em;
}

#main > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #eee;
    z-index: -1;
}

#main > a.red:hover ~ div {
    background-color: red;
}

#main > a.green:hover ~ div {
    background-color: green;
}

#main > a.blue:hover ~ div {
    background-color: blue;
}
于 2013-05-10T19:30:10.947 に答える
1

CSS 親セレクターを持つ方法がないため、デザインを再考することをお勧めします。

子として id="active" を持つ div があり、必要に応じて .active クラスのスタイルを設定する場合は、クラス名activeを親 div に追加します。

<nav id="mainNav" class="{if child active print 'active'}">
   <div id="navContainer">
       <div id="active">
           [ some list ]
       </div><!-- #active -->
   </div><!-- #navContainer -->
</nav><!-- #mainNav -->

使用している言語によっては、これを実現できます。

#mainNav.active:hover #active{
   ... your hover properties ...
}
于 2013-05-10T19:24:52.720 に答える
1

CSS4 は「サブジェクト」演算子を定義しており、これにより次のことが可能になります。

!#mainNav #active:hover { background-color:#333 }

ただし、私が知る限り、これをサポートしているブラウザーはまだありません。代わりに、次の JavaScript を使用できます。

(function() {
    var nav = document.getElementById('mainNav'), active = document.getElementById('active'),
        f = function(e) {
            e = e || window.event;
            nav.style.backgroundColor = e.type.match(/mouseover/) ? "#333" : "";
        };
    if( window.addEventListener) {
        active.addEventListener("mouseover",f,false);
        active.addEventListener("mouseout",f,false);
    }
    else {
        active.attachEvent("onmouseover",f);
        active.attachEvent("onmouseout",f);
    }
})();
于 2013-05-10T19:25:25.707 に答える
1

One Trick Pony がコメントしたように、純粋な CSS には (少なくともまだ) 親セレクターはありません。親を選択したい場合は、別の種類のセレクター (DOM 構造の知識が必要) を使用するか、Javascript などを使用する必要があります。

Javascript.parentNodeでは、要素で使用してその親を取得できます。jQuery がある場合は、 を呼び出すことができます.parent()。

于 2013-05-10T19:21:16.813 に答える