style - En un evento de desplazamiento de CSS, ¿puedo cambiar el estilo de otro div?

title html tooltip

Question

Posible duplicado:
¿Hay alguna forma de desplazarse sobre un elemento y afectar a un elemento diferente?

Cuando paso sobre un div o una clase con un id de "a", ¿puedo cambiar el color de fondo de un div o una clase con el id de "b"?

Answer 1

El siguiente ejemplo se basa en jQuery, pero se puede lograr utilizando cualquier conjunto de herramientas JS o incluso JS antiguo

$(document).ready(function(){
$("#a").mouseover(function(){
$("#b").css("background-color", "red");
});
});

Answer 2

Esto no se puede hacer puramente 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'', '''');
});
});

Answer 3

Una solución pura sin jQuery:

Javascript (Head)

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/

Answer 4

Sí, puedes hacer eso, pero solo si #b está después de #a en el HTML.

Si #b aparece inmediatamente después de #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 adyacente ( + ).

Si hay otros elementos entre #a y #b , puede 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 general de hermanos ( ~ ).

Ambos + y ~ funcionan en todos los navegadores modernos e IE7 +

Si #b es un 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 se coloca a la derecha o debajo del segundo. Funcionará como si fuera un hermano anterior.