html - CSS 元素悬停只影响第一个

Question

我有以下 CSS 和 HTML：

.moods a#Action:hover{background: red;};
.moods a#Comedy:hover{background: orange;};

 <div class='moods'>
     <a id='Comedy'>want to laugh</a>
     <a id='Action'>edge of the seat</a>
     <a id='Science Fiction'>it's all fantasy</a>

</div>

出于某种原因，css 仅影响第一个选择，例如在这种情况下，只有 Action 在悬停时变为红色。但是，如果我把喜剧放在行动之前，那么喜剧在悬停时会变成橙色。

有人可以帮我解决这个问题吗？

谢谢

Answer 1

去掉右括号后的分号。他们干扰了你的第二条规则，而且他们不应该在那里：

.moods a#Action:hover{background: red;}
.moods a#Comedy:hover{background: orange;}