CSS div: exclusión de desplazamiento

tengo dos divs, uno dentro del otro. Cuando yo hover sobre el exterior, me gustaría cambiarle el color, no hay problema. pero cuando yo hover sobre el interior me gustaría cambiar solo su color. es posible? En otras palabras, cuando hovering sobre el div interno, me gustaría ver el "anillo" rojo.

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

preguntado el 12 de junio de 12 a las 20:06

2 Respuestas

No con CSS simple. Si se desplaza sobre un niño, necesariamente se desplaza sobre sus padres.

Sin embargo, los planes CSS4 incluyen algo que puede ayudar:

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

La ! hará #test el tema del selector, por lo que seleccionará #test si contiene un div:hovery vuelva a aplicarle el fondo rojo.

Respondido el 12 de junio de 12 a las 20:06

Por cierto, ¿qué navegadores admiten esto? - Écir Hana

Muy pocos, si es que hay alguno. Algunas versiones de Firefox o Chromium pueden tenerlo. - Niet el oscuro Absol

No anidar el div funcionará.

Ver este violín:

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

Respondido el 20 de junio de 20 a las 10:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.