2

これは私のコードです：

HTML

<div id="corner">
    <div id="cornerbox"></div>
</div>

CSS

#corner {
    background-color: red;
    width: 200px; height: 200px;
}
#corner #cornerbox {
    background-color:black;
    width: 100px; height: 100px;
    opacity: 0.4;
}
#corner:hover  #cornerbox, #corner #cornerbox.show{
    opacity: 1;
}

JavaScript

$(document).keypress(function(e) {
        //console.log("keypress event from document: ",e.which);
        if (e.which == 63) {    // question mark (?) key
            $("#cornerbox").toggleClass("show");
        }
});

JSFiddleコードはこちら

したがって、CSSは#corner：hoverのたびに「#cornerbox」の不透明度を変更し、JavaScriptは疑問符（？）キーが押されるたびに「#cornerbox」のクラス「show」を切り替えます。

上記のCSSを次のように変更すると、次のようになります。

#corner {
    ...
}
#corner #cornerbox {
    ...
}
#corner:hover #cornerbox, #cornerbox.show {
    ...
}

（？）キーを押しても不透明度は変更されませんが、「＃cornerbox」はクラス「show」を受け取ります。

他のすべての可能性は機能します。

これは機能します。

#corner {
    ...
}
#cornerbox {
    ...
}
#corner:hover #cornerbox, #corner #cornerbox.show {
    ...
}

そして、これは機能します。

#corner {
    ...
}
#cornerbox {
    ...
}
#corner:hover #cornerbox, #cornerbox.show {
    ...
}

なんで？

前もって感謝します！

タセ

4

1 に答える 1

6

これは、セレクターの特異性が、よりも#cornerbox.show低いために発生します。つまり、セレクターをオーバーライドすることはできません。#corner #cornerbox

#cornerbox.showidセレクターを追加しての特異性を上げるか、idセレクター#corner #cornerboxを削除して特異性を下げると、新しい状況で2番目のセレクターをオーバーライドできます。

于 2013-02-18T14:34:06.973 に答える