a:hover not working

css, hover, html

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.

Problem

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.

Original source