javascript - Change color of the text in navigation bar when hover -
i want text of navigation bar change color when hover. what's wrong codes?
html
<div class="nav"> <ul class="pull-left"> <li><a href="#">ride</a></li> <li><a href="#">drive</a></li> </ul> <ul class="pull-right"> <li><a href="#">find city</a></li> <li><a href="#">help</a></li> <li><a href="#">sign in</a></li> </ul> </div>
css: css part, im not sure when select 'a' or when select 'li'
.nav { padding: 14px 10px; text-transform: uppercase; font-family: avenir; font-size: 14px; font-weight: bold; color: black; text-decoration: none; } .nav li { display: inline; } .nav { padding-top: 30px; padding-right: 30px; } .add { color: maroon; }
js
$(document).ready(function() { $('.nav').hover(function() { $('a').addclass('add') }, function() { $('a').removeclass('add') }); });
thanks lot!
no need javascript, can use css this:
you can try add css style nav> a>hover this:
.nav a:hover { color: maroon; }
Comments
Post a Comment