a:hover not working

Issue

HTML

 <table width="100%">
<tr>
    <td width="90%"></td>
    <td><a href="#" id="logout"><strong>Logout</strong></a></td>
 </tr>
</table>

CSS

@charset "utf-8";
/* CSS Document */

#logout {
color:#BBB;
}

a:hover {
color:#FFF;
}

Though the color of logout appears to be what is given in the css , the color doesn’t change when i place my mouse over the link (to white) . What is the reason ?

I must tell there are other css files that tend to change the color of the link when the mouse is placed over them and they work fine.

Solution

An id selector (#logout) is more specific then a type selector (a) plus a pseudo-class (:hover), so your first ruleset will always win the cascade.

Use #logout:hover instead.

Answered By – Quentin

Answer Checked By – Katrina (AngularFixing Volunteer)