爱华网导航栏背景图片的切换，使用CSS或者JS。
下面是用使用JQuery来实现。
<ul> <li><atitle="部门A"href="#"target="_blank">部门A</a></li> <li><atitle="部门B"href="#"target="_blank">部门B</a></li> <li><atitle="部门C"href="#"target="_blank">部门C</a></li> <li><atitle="部门D"href="#"target="_blank">部门D</a></li> <li><atitle="部门E"href="#"target="_blank">部门E</a></li> </ul>
样式：
.topNavigation{ float:left; height:35px; line-height:35px; overflow:hidden; padding-left:8px; } .topNavigationli{ float:left; height:37px; line-height:37px; list-style:noneoutsidenone; padding:021px; text-align:center; vertical-align:middle; width:auto; } .topNavigationlia:link{ color:#000000; font-size:13px; font-weight:bold; text-decoration:none; }
效果如下：
JQuery脚本：
<scriptsrc="../JavaScripts/jquery.min.js"type="text/javascript"></script> <scripttype="text/javascript"> setTimeout(function(){ $(function(){ $(".topNavigation").children("li").each(function(){ $(this).mouseover(function(){ $(this).css({"background-image":"url('../images/nav_btn_hover.png')","background-position":"top"}); }), $(this).mouseleave(function(){ $(this).css({"background-image":"url('../images/line.gif')","background-position":"right"}); }) },null); }); },1000); </script>
最终效果：
您可能也喜欢：
JS 日历及日期扩展 2013.02.22
JS 日历及日期扩展
ChildNodes与parentNode 2011.12.02
ChildNodes与parentNode
【转载】SharePoint 2010 MasterPage去Ribbon 的方法 2013.01.19
【转载】SharePoint 2010 MasterPage去Ribbon 的方法
《ExtJS2.0实用简明教程》之ExtJS版的Hello 2008.08.26
《ExtJS2.0实用简明教程》之ExtJS版的Hello
EXTJS 2011.08.20
EXTJS
jQuery选择器全解【转】 2012.04.19
jQuery选择器全解【转】
JQuery中文入门教程 2011.08.20
JQuery中文入门教程
广告代码 2012.11.08
广告代码
26个Jquery使用小技巧(jQuery tips, tricks & solutions) 2011.08.20
26个Jquery使用小技巧(jQuery tips, tricks & solutions)
50个jquery代码片段 2011.12.12
50个jquery代码片段
jQuery温习篇---强大的JQuery选择器 2011.08.20
jQuery温习篇---强大的JQuery选择器
【引用】html 元素的默认样式值 2011.10.23
【引用】html 元素的默认样式值
转发至微博
