CSS: coloque el cursor sobre otro elemento?

Question

Pregunta breve: ¿Por qué el background-color de .b no cambia cuando estoy sobrevuelo? .a?

CSS

.a { 
    color: red; 
} 

.b { 
    color: orange; 
} 

.a:hover .b { 
    background-color: blue; 
} 

HTML

<div id="wrap"> 
    <div class="a">AAAA</div> 
    <div class ="b">BBBB</div> 
</div> 

http://jsfiddle.net/2NEgt/

Answer 1

Es necesario tener .a:hover + .b en lugar de .a:hover .b

.a:hover .b trabajaría para una estructura como

<div class="a">AAAA 
    <div class ="b">BBBB</div> 
</div> 

Si en algún momento tendrá que tener algunos elementos entre .a y .b , entonces necesitará usar .a:hover ~ .b, que funciona para todos los hermanos de .a que vienen después de, no solo el siguiente.

demostración http://jsfiddle.net/thebabydino/EajKf/

Answer 2

porque .b no es un hijo de .a, por lo que el selector no es encontrar nada. Use javascript para hacer lo que quiera hacer allí.

Answer 3

No debe cambiar el estilo de un hermano cuando se produce un evento en un elemento diferente. Está fuera del contexto de CSS.

Uso de JavaScript para lograr esto, por ejemplo:

var wrap = document.getElementById("wrap"); 
var aDiv = wrap.getElementsByClassName("a")[0]; 
var bDiv = wrap.getElementsByClassName("b")[0]; 
aDiv.onmouseover = function() { 
    bDiv.style.backgroundColor = "red"; 
}; 
aDiv.onmouseout = function() { 
    bDiv.style.backgroundColor = "white"; 
}; 

Answer 4

¿Puede usted no hacer algo como a:hover + b? ve http://meyerweb.com/eric/articles/webrev/200007a.html

Answer 5

Puede usar + selector de

.a:hover + .b { 
    background-color: blue; 
} 

para aplicar el CSS para el elemento de hermanos, o

.a:hover > .b { 
    background-color: blue; 
} 

para la clase anidada.

Answer 6

Hay dos cosas que puede hacer.

tiene que cambiar el código HTML para hacer .b un niño de .a

<div id="wrap"> 
    <div class="a">AAAA 
     <div class ="b">BBBB</div>   
    </div> 
</div> 

O

Cambiar el CSS a utilizar el selector adyacente

.a:hover + .b { 
    background-color: blue; 
} 

Answer 7

no js necesario http://jsfiddle.net/2NEgt/3/

Answer 8

trata de entender esto ejemplo:
código html

<p>Hover over 1 and 3 gets styled.</p> 
<div id="one" class="box">1</div> 
<div id="two" class="box">2</div> 
<div id="three" class="box">3</div> 

<!--css--> 
#one:hover ~ #three{ 
background-color: black; 
color: white; 
} 
.box { 
cursor: pointer; 
display: inline-block; 
height: 30px; 
line-height: 30px; 
margin: 5px; 
outline: 1px solid black; 
text-align: center; 
width: 30px; 
} 

cuando se pasa en la caja 1 de la caja 3 conseguirá el color negro

Answer 9

jQuery es una solución buena y fácil:

html:

<div class="a">AAA</div> 
<div class="b">BBB</div> 

guión: poner este script en su html si lo desea. Eso es todo.

<script> 
     $(".a").mouseover(function(){ 
     $(".b").css("color", "blue"); 
     }); 
     $(".a").mouseleave(function(){ 
     $(".b").css("color", "red"); 
     }); 
</script>