鼠標移到導航當前位置的LI變色處于選中狀態(tài)
更新時間：2013年08月23日 18:16:41 作者：
本文所要實現(xiàn)的效果廣泛應(yīng)用于當前導航,主要表現(xiàn)為鼠標移到導航上面當前的LI變色，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助
鼠標移到導航上面 當前的LI變色 處于當前的位置，廣泛應(yīng)用于當前導航。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>鼠標移到導航上面 當前的LI變色 處于當前的位置</title>
<style type="text/css">
ul,li{list-style:none;}
#nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;}
#nav li.h_nav_over{background:red;color:#fff;}
#nav li.h_nav_over a{color:#fff;}
a{text-decoration:none;}
</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#nav>ul>li").mouseover(function(){
$("#nav>ul>li").each(function(i){
$(this).removeClass("h_nav_over");
});
$(this).addClass("h_nav_over");
}).mouseout(function(){
$(this).addClass("h_nav_over");
});
});
</script>
</head>
<body>
<div id="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="#" >投資考察會</a></li><li><a href="#" >在線交流區(qū)</a></li>
</ul>
</div>
</body>
</html>
復制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>鼠標移到導航上面 當前的LI變色 處于當前的位置</title>
<style type="text/css">
ul,li{list-style:none;}
#nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;}
#nav li.h_nav_over{background:red;color:#fff;}
#nav li.h_nav_over a{color:#fff;}
a{text-decoration:none;}
</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#nav>ul>li").mouseover(function(){
$("#nav>ul>li").each(function(i){
$(this).removeClass("h_nav_over");
});
$(this).addClass("h_nav_over");
}).mouseout(function(){
$(this).addClass("h_nav_over");
});
});
</script>
</head>
<body>
<div id="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="#" >投資考察會</a></li><li><a href="#" >在線交流區(qū)</a></li>
</ul>
</div>
</body>
</html>
相關(guān)文章
本篇文章主要介紹了解決ajax不能訪問本地文件問題（利用js跨域原理），具有一定的參考價值，有興趣的可以了解一下。2017-01-01
jquery監(jiān)控數(shù)據(jù)是否變化(修正版)
jquery監(jiān)控數(shù)據(jù)是否變化(修正版) 之前寫的那篇中存在許多bug，今天重新整理了一下。還請各位指教2011-04-04
在頁面上圖片比較多的時候，打開一張頁面必然引起與服務(wù)器大數(shù)據(jù)量的交互。尤其是對于高清晰的圖片，占了幾百K的空間。那么我們?nèi)绾尾拍芨淖冞@種狀況呢，這就是今天我們要探討的問題了。2015-03-03
jquery中ajax請求后臺數(shù)據(jù)成功后既不執(zhí)行success也不執(zhí)行error的完美解決方法
這篇文章主要介紹了jquery中ajax請求后臺數(shù)據(jù)成功后既不執(zhí)行success也不執(zhí)行error解決方法,需要的朋友可以參考下2017-12-12
Jquery選擇子控件"大于號"和" "區(qū)別介紹及使用示例
Jquery選擇子控件”>“：在給定的父元素下匹配所有的子元素；另一個就是在給定的祖先元素下匹配所有的后代元素，具體概述及使用示例如下，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要介紹了jQuery中的val()的使用,需要的朋友可以參考下2014-02-02
關(guān)于JQuery($.load)事件的用法和分析
本篇文章小編為大家介紹，關(guān)于JQuery($.load)事件的用法與分析，有需要的朋友可以關(guān)注一下2013-04-04
jQuery實現(xiàn)textarea自動增長寬高的方法
這篇文章主要介紹了jQuery實現(xiàn)textarea自動增長寬高的方法,涉及jQuery針對鍵盤按鍵的響應(yīng)及頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了jQuery操作事件,結(jié)合完整實例形式分析了jquery事件綁定、解綁、響應(yīng)、觸發(fā)等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
deferred對象就是jQuery的回調(diào)函數(shù)解決方案。在英語中，defer的意思是"延遲"，所以deferred對象的含義就是"延遲"到未來某個點再執(zhí)行。2016-09-09