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

我有以下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悬停时才会变为红色。但是，如果我将喜剧放在动作之前，那么当悬停时喜剧会变成橙色。

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

谢谢

最佳答案

在右括号后摆脱分号。他们正在干扰您的第二条规则，并且无论如何都不应该在那里：

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

关于html - CSS元素悬停仅影响第一个，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12622310/