CSS3：如何正確使用：懸停來修改其他元素的樣式？

我對使用僞類:hover感到困惑。CSS3：如何正確使用：懸停來修改其他元素的樣式？

在下面的HTML，:hover作品如預期的ul元素，但不是爲div的：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset:"utf-8" /> 
<style> 

#div1:hover #div2 { 
    color: green; 
} 

#ul2 { 
    display: none; 
} 

#ul1:hover #ul { 
    display:block; 
}  

</style> 
</head> 

<body> 
<div id='div1'> 
If I hover this, then the next div should change color to green... 
</div> 

<div id='div2'> 
But it doesn't change colors! 
</div> 

<ul id='ul1'> 
<li>If I hover this, then ul2 shows up</li> 
<ul id='ul2'> 
<li>We're showing up!</li> 
<li>We're showing up!</li> 
</ul> 
<li>etc.</li> 
</ul> 

</body> 
</html>

#div2，如果我改變這一行#div1:hover #div2 {到#div1:hover + #div2 {（注意加號纔會變綠「+」）。我不明白，爲什麼需要「+」？在這question，代碼甚至使用nav ul li:hover > ul。什麼是>？

總結我的問題：什麼是做在CSS :hover改變的另一元素的SYLE規則？

來源

2017-04-13 flen

那不工作在純粹的CSS，你必須使用javascript（jquery） – Felix

@FelixHäberle謝謝！但爲什麼呢？瀏覽器實現有問題嗎？ – flen

其在css規格的情況下 – Felix

我不明白工作，爲什麼是「+」所需要的？

的+代表相鄰的兄弟選擇，其中一個使用時的目標是一個立即同級元件，如對面來的子元素

在這裏閱讀更多的元素：https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

什麼是> for？

的>看臺上爲孩子選擇，並針對直接孩子只有

作爲一個側面說明，它是無效的有一個ul（在這種情況下，<ul id='ul2'>）作爲另一個ul的直接孩子，內部的一個應該包裝在li

來源

2017-04-13 08:53:31 LGSon

非常感謝！過去2個小時我一直在爲此苦苦掙扎！所以這就是爲什麼。我選擇你的答案作爲答案，但StackOverflow禁止我在3分鐘前選擇它 – flen

@flen不客氣 – LGSon

你＃DIV2必須＃DIV1的孩子，如果你想讓它像

來源

2017-04-13 08:52:54 maxDef

你想要做什麼？如果要使用相同的懸停形式都div，所以也許這樣的事情。

#div1:hover, #div2:hover {color: green;}

來源

2017-04-13 09:15:28

CSS3：如何正確使用：懸停來修改其他元素的樣式？

回答

相關問題