JQuery制作简单的网页导航特效

Posted 2020-07-04

使用JQuery中hover()方法，使其根据鼠标的移动简单的改变背景颜色;

hover();用于模拟鼠标指针悬停事件，当鼠标指针移动到元素上时，会触发指定的第一个函数，当鼠标指针移除这个元素时，会触发第二个函数；类似于mouseover和mouseout组合具体的代码如下：

html代码：

<div class="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="#">KTV</a></li>
            <li><a href="#">酒店</a></li>
            <li><a href="#">购物</a></li>
        </ul>
    </div>
css：

.nav{
		margin:0;
		padding:0px;
		width:800px;
		height:100px;}
	.nav ul{
		list-style:none;
}
	a{
		text-decoration:none;}
	.nav ul li{
		width:100px;
		height:50px;
		line-height:50px;
		background-color:#999;
		display:inline;
		float:left;
		text-align:center;
		font-size:18px;
		font-weight:bold;
}

Jq:

$(function(){
			/*
			导航背景颜色切换效果 hover()
			*/
			$("li").hover(function(){
				$(this).css("background-color","#C60");
				},
				function(){
					$(this).css("background-color","#999");
				});

			});