Geek Answers Handbook

How to change snap color when hovering over a list

I have the following HTML and CSS.

When I hover over a list, I want to change the background color and font color. However, my style does not change when I hang the inscription on the list, on the border or near the border inside the list.

http://jsfiddle.net/Hbf9D/1/

How can i do this?

#nav li{ display: inline; text-align: center; list-style-type:none; background-color:#1A365B; margin: 0 6px 0 0; padding: 2px 11px 4px 11px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } #nav li:hover{ background-color:#E0F1EA; border: 2px solid #000; color: #000000; padding: 0 9px 2px 9px; } #nav li a:hover{ color: #000000; } #nav li a{ text-decoration: none; color: #ffffff; font-weight:bold; font-family: 'CantarellBold', Arial, sans-serif; text-transform: capitalize; font-size: 12px; } <ul id="nav" class="grid_16"> <li><a href="#">FORSIDE</a></li> <li><a href="#">MOBIL</a></li> <li><a href="#">PC OG SERVERE</a></li> <li><a href="#">TJENESTER</a></li> </ul>
+7
css hover
source share
2 answers

try the following:

 #nav li:hover a{ color: #000000; }

http://jsfiddle.net/zainshaikh/Hbf9D/3/

+13
source share

this may seem strange, but try putting #nav li a: hover style to #nav li a

0
source share

More articles:


All Articles