上一張鄰居兄弟選擇器解決方法？

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中沒有以前的選擇器。一種方法是實現室內用它像jQuery的煤焦@Alex指出，和其他的方式是與父母，而不是實際的項目懸停，純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>

Answer 2

沒有以前的CSS元素選擇。

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

General sibling combinator：

一般兄弟組合子由與 「波浪線」（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>

參考

.hover()

.toggleClass()