导航栏背景图片的切换，使用CSS或者JS。
下面是用使用JQuery来实现。
<ul class="topNavigation"> <li><a title="部门A" href="#" target="_blank">部门A</a></li> <li><a title="部门B" href="#" target="_blank">部门B</a></li> <li><a title="部门C" href="#" target="_blank">部门C</a></li> <li><a title="部门D" href="#" target="_blank">部门D</a></li> <li><a title="部门E" href="#" target="_blank">部门E</a></li> </ul>
样式：
.topNavigation { float: left; height: 35px; line-height: 35px; overflow: hidden; padding-left: 8px; } .topNavigation li { float: left; height: 37px; line-height: 37px; list-style: none outside none; padding: 0 21px; text-align: center; vertical-align: middle; width: auto; } .topNavigation li a:link { color: #000000; font-size: 13px; font-weight: bold; text-decoration: none; }
效果如下：
JQuery脚本：
<script src="../JavaScripts/jquery.min.js" type="text/javascript"></script> <script type="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>
最终效果：
转发至微博 
