html - hover on other element CSS?

Question

Why does the background-color of .a does not change when I hover? .b?

CSS

.a {
    color: red;
}

.b {
    color: orange;
}

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

HTML

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

http://jsfiddle.net/2NEgt/323/

Answer 1

Because .a is not descendent or comes after/inside of .b which is condition to work for it

for example if you inverse it, since .b is descendent of .a, it will work

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