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制作简单的网页导航特效的主要内容,如果未能解决你的问题,请参考以下文章