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方法使您.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;
}