鼠标悬浮背景变色导航菜单

分享一段代码实例，它实现了鼠标悬浮导航菜单背景变色效果。 代码实例如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 <!doctype html> < html > < head > < meta  charset = "utf-8" > < title > 鼠标悬浮背景变色导航菜单 </ title > < style  type = "text/css" > *{     margin: 0;    padding: 0;    text-decoration: none;     list-style: none;     color: #666; } .nav li{     float: left;     padding: 10px 20px;  } .nav li.on{     background: #10AEFF; } .nav li.on a{     color: #fff; } </ style > < script  src = "http://libs.baidu.com/jquery/1.9.0/jquery.js" ></ script > < script > $(document).ready(function () {    $('li').hover(function (ev) {      $(this).addClass('on').siblings().removeClass('on');    },function (ev) {      if (!$(this).hasClass('active')) {        $(this).removeClass('on').siblings('.active').addClass('on');      }    }) }) </ script > </ head > < body > < ul  class = "nav" >    < li  class = "on active" >< a  href = "javascript:;" >导航一</ a ></ li >    < li >< a  href = "javascript:;" >导航二</ a ></ li >    < li >< a  href = "javascript:;" >导航三</ a ></ li >    < li >< a  href = "javascript:;" >导航四</ a ></ li >    < li >< a  href = "javascript:;" >导航五</ a ></ li > </ ul > </ body > </ html >