Previous adjacent sibling selector workaround?

Question

I have two adjacent selectors that I would like to effect when hovering over the other. In the example below, the two selectors should effect the others CSS when hovered. This works perfectly when hovering .a, but not when hovering .b. I realize this is because the DOM is read in order, and therefore CSS selectors cannot work backwards.

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

Here is a 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

There isn't css previous element selector.

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

General sibling combinator:

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

One solution is using 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>

References

.hover()

.toggleClass()