2

ホバーに問題がある

私は次のような3つの子divを持っています:

<div class="parent">
    <div class="child1">A</div>
    <div class="child2">B</div>
    <div class="child3">C</div>
</div>

親 div にホバーを適用して、child1 および child2 div の色を変更しました。それでもホバーはchild3 divにも適用されます....

child3 だけでホバーを除外する方法はありますか??

どんな助けでも大歓迎です。前もって感謝します。

div.parent:hover {
    color: #909090;
}

上記の例では、フォント「C」は親 div 内に存在しますが、色の変更があってはなりません。

4

7 に答える 7

2 
div.parent:hover {
    color:#909090;
}

あなたのCSSは、「クラスの親でDIVタグを選択し、ホバー状態でのみ次のCSSを適用してから、フォントの色を#909090に変更してください」と言っています。

まず、子にホバー状態が必要な場合は、次のようにします。

/* explanation: select DIV tags with "child" class on hover state */
div.parent div:hover {
    /* apply your CSS here */
}

一部のタグに特定の CSS を作成し、それを他のタグから除外する場合は、より具体的にします。任意のタグに複数のクラスを追加できます。たとえば、特別なホバー状態のために child1 と child2 に別のクラスを追加し、child3 から除外してみましょう。

<div class="parent">
    <div class="child1 myHoverClass"></div>
    <div class="child2 myHoverClass"></div>
    <div class="child3"></div>
</div>

これを CSS で簡単に制御できるようになりました。

/* explanation: find parent class div, then select children DIV tags with class name "myHoverClass" and apply CSS for hover state only.. in this case, only child1 and child2 DIV tags */
div.parent div.myHoverClass:hover {
    /* apply your CSS here */
}

注: CSS のスペースに注意してください。スペースは非常にデリケートであり、慎重に使用しないとまったく別の意味になる可能性があります。

于 2013-08-28T09:59:32.640 に答える
1

スタイルを追加してみることができます

.child3
{
    color : #000;
}

デモ

于 2013-08-28T09:41:08.167 に答える
0

別のクラスを追加するchild1と、次のchild2ようになります。

<div class="parent">
    <div class="test child1"></div>
    <div class="test child2"></div>
    <div class="child3"></div>
</div>

.test:hover{background-color:red;}
于 2013-08-28T10:25:38.890 に答える
0 
div.parent:hover > :not(.child3) {
    color:#909090;
}
于 2013-08-28T09:41:58.937 に答える
0 
 div.parent:hover .child1,div.parent:hover .child2{
    color: #909090;
}
于 2013-08-28T10:16:14.613 に答える