Question

I have two divs, one inside the other. When I hover over the outer one, I would like to change its color, no problem. But when I hover over the inside one I would like to change only its color. Is this possible? In other words, when hovering over the inner div, I would like to see the out red “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;
}

Answer 1

Not with plain CSS. If you’re hovering over a child, you are necessarily hovering over its parent(s).

However CSS4 plans include something that may help:

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

The ! will make #test the subject of the selector, so it will select #test if it contains a div:hover, and re-apply the red background to it.