CSS div: hover exclusion - html, css

mam dwa divs, jeden w drugim. Kiedy ja hover ponad zewnętrznym chciałbym zmienić jego kolor, bez problemu. Ale kiedy ja hover nad wewnętrznym chciałbym zmienić tylko jego kolor. czy to możliwe? Innymi słowy, kiedy hoverna wewnętrzny div, chciałbym zobaczyć out "ring".

<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;
}

Odpowiedzi:

Nie ze zwykłym CSS. Jeśli unosisz się nad dzieckiem, koniecznie zawisasz nad rodzicem (rodzicami).

Jednak plany CSS4 zawierają coś, co może pomóc:

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

The ! zrobi #test temat selektora, a więc wybierze #test jeśli zawiera div:hoveri ponownie zastosuj do niego czerwone tło.

Nie zagnieżdżanie div zadziała.

Zobacz skrzypce:

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;
}