html - css hover 不起作用(小代码)

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 .