CSS :hover on other element?

Question

Short question: Why does the background-color of .b does not change when I hover? .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

Can you not do something like a:hover + b? see http://meyerweb.com/eric/articles/webrev/200007a.html

Answer 2

You need to have .a:hover + .b instead of .a:hover .b

.a:hover .b would work for a structure like

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

If at some point you'll need to have some elements between .a and .b, then you'll need to use .a:hover ~ .b, which works for all siblings of .a coming after it, not just the next one.

Demo http://jsfiddle.net/thebabydino/EajKf/

Answer 3

There are two things you can do.

Either change your HTML to make .b a child of .a

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

OR

Change your css to use the adjacent selector

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

Answer 4

because .b isn't a child of .a, so that selector isn't finding anything. Use javascript to do what you want to do there.

Answer 5

Jquery is a good and easy solution:

html:

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

script: Put this script into your html if you want. That's all.

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

Answer 6

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