Stack Overflow en español Asked by Juaqui on December 5, 2021
Tengo dos elementos div, lo que quiero conseguir es que al pasar con el ratón sobre el primer elemento se cambie el color del segundo, y al pasar sobre el segundo se cambie el color del primero. No se si se puede hacer con pseudo clases.
Este es el código que tengo
#div1
{
position: absolute;
top: 10px;
left: 10px;
}
#div1:hover
{
color: red;
}
#div2
{
position: absolute;
top: 30px;
left: 10px;
}<body>
<div id="div1">Div número 1</div>
<div id="div2">Div número 2</div>
</body>¿Se puede indicar de alguna manera con CSS que al pasar sobre el div número 1 se cambie el color del div número 2 o viceversa?
Respuesta corta: No se puede ya que al estar al mismo nivel y declarar la propiedad hover en un div solo puedes aplicar estilos a lo que se sitúe en un nivel inferior a dicho div
Respuesta extendida: Puedes hacerlo mediante JavaScript asignando una clase a tu div2 al hacer hover en tu div1 y viceversa:
document.getElementById('div1').onmouseover = function(){
document.getElementById('div2').classList.add('hover');
}
document.getElementById('div1').onmouseout = function(){
document.getElementById('div2').classList.remove('hover');
}
document.getElementById('div2').onmouseover = function(){
document.getElementById('div1').classList.add('hover');
}
document.getElementById('div2').onmouseout = function(){
document.getElementById('div1').classList.remove('hover');
}#div1.hover{
color: red;
}
#div2.hover{
color: blue
}<div id="div1">Div número 1</div>
<div id="div2">Div número 2</div>Answered by David on December 5, 2021
Probando, por puro interés académico y cabezonería, me negaba a creer que no hubiese una manera de hacer lo que necesitas. Y a grandes rasgos no existe una manera de seleccionar un elemento anterior en CSS pero se me ocurrió un truquillo para aparentar que lo estás haciendo en este caso en específico.
Envolviendo tus dos <div> con otro, podemos seleccionar el <div> en el que se está haciendo un hover y dentro de este buscar el <div> al que no se le esté haciendo un hover y a ese aplicarle el cambio de color.
#div1 {
position: absolute;
top: 10px;
left: 10px;
}
#div2 {
position: absolute;
top: 30px;
left: 10px;
}
div:hover div:nth-child(1):not(:hover) {
color: blue;
}
div:hover div:nth-child(2):not(:hover) {
color: red;
}<div>
<div id="div1">Div número 1</div>
<div id="div2">Div número 2</div>
</div>Answered by phpMyGuel on December 5, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP