Question

I have the following CSS and 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>

For some reason css only effects the first selection, for instance in this case only Action gets red when hover. However if I put Comedy before Action then Comedy gets orange when hover.

Can anybody help me with the issue?

Thanks

Answer 1

Get rid of the semicolons after your closing braces. They’re interfering with your second rule, and they’re not supposed to be there anyway:

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