用JQuery做导航栏,当鼠标放到字上去时,导航栏会变颜色
代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>团购网主导航</title> <style type="text/css"> * { padding: 0px; margin: 0px; font-family: Arial, "微软雅黑", "宋体"; font-size: 14px; } nav{ height: 40px; width: 800px; margin: 10px auto; background-color: #8cc6ce; } nav ul{ width: 100%; height: 40px; overflow: hidden; } nav ul li{ width: 100px; height: 40px; float: left; list-style-type: none; text-align: center; line-height: 40px; } nav ul li a{ font-size: 18px; color: white; text-decoration: none; display: block; } .heightlight{ background-color: #0038ce; } </style> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("li").mouseover(function(){ $(this).addClass("heightlight"); }).mouseout(function(){ $(this).removeClass("heightlight"); }); }); </script> </head> <body> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">身边团购</a></li> <li><a href="#">美食</a></li> <li><a href="#">电影</a></li> <li><a href="#">KTV</a></li> <li><a href="#">酒店</a></li> <li><a href="#">购物</a></li> </ul> </nav> </body> </html>
页面显示效果: