jQueryhover事件制作jquery菜单-创新互联
jQuery hover事件
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、虚拟空间、营销软件、网站建设、新丰网站维护、网站推广。hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
参数 :
over (Function) : 鼠标移到元素上要触发的函数
out (Function): 鼠标移出元素要触发的函数
示例 :
鼠标悬停的表格加上特定的类
jQuery 代码:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
实例如下:
body{
font-size:12px;
margin:0px;
}
#box{
width:150px;
margin:auto;
}
.menu{
width:150px;
line-height:25px;
background:#fcc;
}
.level1{
border-color:#fba;
border-style:solid;
border-width:0px1px 1px;
}
ul,li {list-style-type:none;margin:0;padding:0;}
.menuli ul{overflow:hidden; display:none;}
.menuli.level1 a{
display: block;
height: 28px;
line-height: 28px;
color:#42556B;
text-decoration:none;
}
.level2{
background-color:white;
}
.level2li a {
display:block;
height: 28px;
line-height: 28px;
color:#888;
background-color:white;
}
.level2li a:hover {
color:#f00;
}
.current{
overflow:hidden;
background-color:#fba;
}
function dropMenu(obj){
$(obj).each(function(){ //遍历当前元素下的每个元素
vartheSpan = $(this);
vartheMenu = theSpan.find(".level2"); //查找类名为".level2"的每个元素
vartarHeight = theMenu.height();
theMenu.css({height:0,opacity:0});
theSpan.hover(
function(){
$(this).addClass("current");
theMenu.stop().show().animate({height:tarHeight,opacity:1},500);
},
function(){
$(this).removeClass("current");
theMenu.stop().animate({height:0,opacity:0},500,function(){
$(this).css({display:"none"});
});
}
);
});
}
$(document).ready(function(){
dropMenu(".level1");
});
效果图如下:
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章名称:jQueryhover事件制作jquery菜单-创新互联
本文来源:http://azwzsj.com/article/cseigi.html