CSS懸停不起作用（小代碼）

Question

我試圖建立一個網站，但是由於某種原因，我陷入了盤旋。 我知道該怎么做，但是我忘了一些事情。 我想要的是，當我將鼠標懸停在黑色條上時，黑色會變成白色，以便您可以看到文本。 這是我的代碼：

 div.spoiler1:hover div.spoiler1 { background-color: white; } 

 <div style='display:inline; background-color: black;' class='spoiler1'>hey</div> 

我也嘗試過此CSS：

 spoiler1:hover spoiler1 { background-color: white; } 

 div.spoiler1:hover,.spoiler1 { background-color: white; } 

 spoiler1:hover { background-color: white; } 

Answer 1

好努力 問題是內聯樣式會覆蓋工作表。 通常，不要使用內聯樣式（難以調試/維護，不可重用）：

 div.spoiler1 { background-color: black; display: inline; } div.spoiler1:hover { background-color: white; } 

 <div class='spoiler1'>hey</div> 

看到這個JSFiddle 。