CSS :hover pseudo-class is not working in my code

Question

I used hover pseudo-class to change color on anchor element <a> but its result is not like that I want. It is not working. Help me please. Thank you very much. JSFiddle here - http://jsfiddle.net/km9287u3/6/

Answer 1

You have a specificty issue. div#nav a is more sepcific than a:hover . Make your hover rule more specific, as below.

 div#nav a { margin-left: 30px; font-size: 1.2em; font-weight: 600; font-family: sans-serif; color: #444; text-decoration: none; } div#nav a:hover { color: brown; }

 <header> <div id="logo"> </div> <div id="nav" class="navigation"> <a id="home" href="Ajax_Load_Content_to_Page.html">HOME</a> <a id="route" href="Ajax2.html">ROUTE</a> <a id="toys" href="Ajax3.html">TOYS</a> </div> </header>