如何「鏈接」2 divs的懸停狀態

Question

我試圖讓我有2個div，一個在屏幕頂部的名稱，一個在屏幕的底部有一些按鈕。如果你將鼠標懸停在一個div上，它們都應該可見。我發現了使用+和〜來讓第二個出現在第一個div上的時候，但是找不到任何方法來反過來。這是我現在有：http://codepen.io/anon/pen/ojpqao

HTML：

<div class="bg"> 
    <div class="topbar"></div> 
    <div class="bottombar"></div> 
</div> 

CSS：

.bg { 
    background-color: red; 
    width: 200px; 
    height: 200px; 
} 

.topbar { 
    width: 200px; 
    height: 20px; 
    background-color: green; 
} 

.bottombar { 
    width: 200px; 
    height: 20px; 
    background-color: green; 
    top: 180px; 
    position: absolute; 
} 

.topbar:hover, .bottombar:hover, .topbar:hover + .bottombar { 
    background-color: blue; 
} 

Answer 1

我只是改變了你的標記一點，因爲你的底欄絕對反正定位：

<div class="topbar"> 
    <div class="bottombar"></div> 
</div> 

然後，你可以這樣做：

.topbar:hover, 
.topbar:hover .bottombar { 
    background-color: blue; 
} 

http://codepen.io/inorganik/pen/gaoeEQ

Answer 2

不幸的是我相信沒有CSS解決這個，見[此頁]（Is there a "previous sibling" CSS selector?）

您可能需要使用Javascript來做到這一點