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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery制作简单的网页导航特效相关的知识,希望对你有一定的参考价值。

使用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");
				});
			});
 

以上是关于JQuery制作简单的网页导航特效的主要内容,如果未能解决你的问题,请参考以下文章

dreamweaver动态菜单怎么做

用jquery制作一个网页,简单一点的,专业人士来解决一下

12个用得着的 JQuery 代码片段

常用的几个JQuery代码片段

网页制作成品

jQuery网页向下滚动导航固定顶部代码