Previous adjacent selector selector?

Question

I have two adjacent selectors that I would like to use when paired over another. In the example below, two selectors should impact the other CSS when it hangs. This works great on hover .a, but not on a fall .b. I understand this because the DOM is read in order, and therefore CSS selectors cannot work in the opposite direction.

However, is there a workaround for jQuery (or any other suggestions) that can achieve this effect?

Here is the fiddle

Thanks.

HTML

<figure>
    <div class="a">
        A
    </div>
    <div class="b">
        B
    </div>
</figure>

CSS

.a {
    width: 100px;
    height: 100px;
    background: red;
}

.b {
    width: 100px;
    height: 100px;
    background: blue;
}

.a:hover ~ .b {
    background: green;
}

.b:hover ~ .a { /* This one doesn't work */
    background: green;
}

Answer 1

css . - jQuery @Alex Char, - , , css :

.a {
    width: 100px;
    height: 100px;
    background: red;
}
.b {
    width: 100px;
    height: 100px;
    background: blue;
}

.parent{             /* ADDED */
    width: 100px;
}

.parent:hover > div:not(:hover) {   /* ADDED */
    background: green;
}

<figure class='parent'>
    <div class="a">
        A
    </div>
    <div class="b">
        B
    </div>
</figure>

Hide result

Answer 2

css.

.b:hover ~ .a { /* This one doesn't work */
    background: green;
}

:

"" (U + 007E, ~) . , , , ( ) , .

jquery .prev():

$(".b").hover(function() {
  //using prev selector and toggleClass
  $(this).prev().toggleClass("active");
});

.a {
  width: 100px;
  height: 100px;
  background: red;
}
.b {
  width: 100px;
  height: 100px;
  background: blue;
}
.a:hover ~ .b {
  background: green;
}
.active {
  background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
  <div class="a">
    A
  </div>
  <div class="b">
    B
  </div>
</figure>

Hide result

. hover()

. toggleClass()