html - CSS div：ホバー除外

Question

私は2つdivのsを持っています。外側をhover重ねたら色を変えたいのですが、問題ありません。でもhover、中身を重ねるときは、色だけを変えたいです。これは可能ですか？つまり、hover内側のdivを確認するときに、真っ赤な「リング」が表示されます。

<div id="test"><div></div></div>

#test {
    background-color: red;
    position: relative;
    width: 100px;
    height: 100px;
}
#test:hover {
    background-color: white;
}
#test div {
    background-color: green;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
}
#test div:hover {
    background-color: white;
}

Answer 1

プレーンな CSS ではありません。子の上にカーソルを置いている場合は、必然的にその親の上にカーソルを置いています。

ただし、CSS4 プランには役立つ可能性のあるものが含まれています。

#test! div:hover {background-color: red;}

はセレクターの対象になるため、含まれている場合は選択さ!れ、赤い背景が再適用されます。#test#testdiv:hover

Answer 2

div をネストしないと機能します。

このフィドルを参照してください：

HTML:

<div id="test"></div>
<div id="ttt"></div>

CSS:

#test {
    background-color: red;
    position: relative;
    width: 100px;
    height: 100px;
}

#test:hover {
    background-color: white;
}

#ttt {
    background-color: green;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
}

#ttt:hover {
    background-color: white;
}