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。