CSS :hover on other element?

css, hover

Solution

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/

Problem

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/

Original source