jquery - 以前的相邻兄弟选择器解决方法？

Question

我有两个相邻的选择器，当悬停在另一个选择器上时我想影响它们。在下面的示例中，两个选择器在悬停时应该影响其他 CSS。这在悬停 .a 时非常有效，但在悬停 .b 时效果不佳。我意识到这是因为 DOM 是按顺序读取的，因此 CSS 选择器不能反向工作。

但是，是否有可以实现此效果的 jQuery 解决方法(或任何其他建议)？

这是一个Fiddle

谢谢。

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 previous 元素选择器。

.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.

一种解决方案是使用 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>

引用资料

.hover()

.toggleClass()