鼠标移到导航当前位置的LI变色处于选中状态

2019/6/29 22:42:51

编程Tag： 当前位置鼠标移到导航 LI变色

本文主要是介绍鼠标移到导航当前位置的LI变色处于选中状态，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

鼠标移到导航上面当前的LI变色处于当前的位置，广泛应用于当前导航。

 
<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="#" >在线交流区</a></li> 
</ul> 
</div> 
</body> 
</html> 

这篇关于鼠标移到导航当前位置的LI变色处于选中状态的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

鼠标移到导航当前位置的LI变色处于选中状态

相关编程文章