En un evento de desplazamiento de CSS, ¿puedo cambiar el estilo de otro div? [duplicar]
Cuando paso el cursor sobre un div o clase con una identificación de "a", ¿puedo cambiar el color de fondo de un div o clase con la identificación de "b"?
Sí, puedes hacer eso, pero solo si #bestá después #aen el HTML.
Si #bviene inmediatamente después #a: http://jsfiddle.net/u7tYE/
#a:hover + #b {
background: #ccc
}
<div id="a">Div A</div>
<div id="b">Div B</div>
Eso es usar el combinador de hermanos adyacentes ( +).
Si hay otros elementos entre #ay #b, puedes usar esto: http://jsfiddle.net/u7tYE/1/
#a:hover ~ #b {
background: #ccc
}
<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>
Eso es usar el combinador de hermanos general ( ~).
Ambos funcionan en todos los navegadores modernos e IE7+ +.~
Si #bes descendiente de #a, simplemente puede usar #a:hover #b.
ALTERNATIVA: Puedes usar CSS puro para hacer esto colocando el segundo elemento antes del primero. El primer div es el primero en el marcado, pero está ubicado a la derecha o debajo del segundo. Funcionará como si fuera un hermano anterior.
Esto no se puede hacer únicamente con CSS. Este es un comportamiento que afecta el estilo de la página.
Con jquery puedes implementar rápidamente el comportamiento de tu pregunta:
$(function() {
$('#a').hover(function() {
$('#b').css('background-color', 'yellow');
}, function() {
// on mouseout, reset the background colour
$('#b').css('background-color', '');
});
});
Una solución pura sin jQuery:
Javascript (cabeza)
function chbg(color) {
document.getElementById('b').style.backgroundColor = color;
}
HTML (cuerpo)
<div id="a" onmouseover="chbg('red')" onmouseout="chbg('white')">This is element a</div>
<div id="b">This is element b</div>
JSFiddle: http://jsfiddle.net/YShs2/
El siguiente ejemplo está basado en jQuery, pero se puede lograr usando cualquier kit de herramientas JS o incluso JS simple y antiguo.
$(document).ready(function(){
$("#a").mouseover(function(){
$("#b").css("background-color", "red");
});
});
