CSS - 懸停在元素上不適用於另一個樣式

Question

我在將另一個div懸停時將樣式應用於div時出現問題。這是我的情景：

<div id="nav"> 
    <div class="logged"></div> 
    <div class="nav_child"></div> 
</div> 

.logged:hover .nav_child { 
    display: initial; 
} 
#nav .nav_child { 
    display: none; 
} 

但它不工作。我也試過.logged:hover > .nav_child和.logged:hover + .nav_child，但仍然沒有。它只適用於#nav:hover .nav_child，但我需要在.logged徘徊時顯示它，而不是在#nav徘徊時顯示。

任何想法？

Answer 1

剛剛解決了鄰接兄弟組合器。我聲明並將'logged'稱爲id，並在.logged：hover和.nav_child之間添加+。

參考：相鄰的兄弟組合子：http://css-tricks.com/child-and-sibling-selectors

舊代碼：http://jsfiddle.net/8rdh7m2j/

工作代碼：

<div id="nav"> 
<div class="logged" id="logged">Hello</div> 
<div class="nav_child">Puff</div> 
</div> 
#logged:hover + .nav_child { 
display: initial; 
} 

#nav .nav_child { 
display: none; 
} 

演示：http://jsfiddle.net/hwh3o8u0/1/

Answer 2

即使只是刪除從孩子#nav和+

.logged:hover+.nav_child { 
    display:initial; 
} 
.nav_child { 
    display: none; 
} 

http://jsfiddle.net/dz22m10y/

Answer 3

你在正確的軌道與.logged:hover + .nav_child方法上。它不起作用的原因是#nav .nav_child具有更高的特異性（因爲它包含一個ID），因此優先於上述規則。

是的，你可以通過移動到logged的ID來解決這個問題，就像你在自我回答中所做的那樣，但是你可以通過添加已經存在的ID來提高懸停規則的特異性到了那裏太：

#nav .logged:hover + nav_child { 

順便說一句，這樣的問題幾乎總是可以使用瀏覽器的開發板的樣式檢查追查。在這種情況下，你會看到兩條規則，並且你會看到第二條規則覆蓋了第一條規則。這很容易讓你得出這是一個特殊問題的結論。大多數風格檢查員會給你「模擬」懸停狀態的能力。

有關特異性的更多信息，請參閱https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity。在你的情況下，你原來的第一條規則具有20（兩個類）的特異性，第二條規則101（一個ID和一個類）。

Answer 4

Here is a good resource that covers this topic http://jsfiddle.net/ThinkingStiff/a3y52/ 
<div id="nav"> 
    <div id="one" class="logged"></div> 
    <div id="two" class="nav_child"></div> 
</div> 
#one:hover ~ two, 
{ 
    background-color: black; 
    color: white; 
}