这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下。
jQuery实现鼠标移入移出事件切换功能
分享给大家供大家参考，具体如下：htmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">
jQuery事件-div的显示隐藏及鼠标的移入移出
.header{
width:302px;
height:40px;
background:green;
font-size:20px;
margin-bottom:0px;
}
.content{
width:300px;
border:1pxsolid#333;
background:#CCC;
display:none;
margin-top:0px;
}
$(function(){
//显示隐藏
$(".header").click(function(){
varflag=$(".content").is(":hidden");
if(flag){
$(".content").show();
}else{
$(".content").hide();
}
});
/*
//使用bind的绑定事件,跟上上面的效果是一样的
$(".header").bind("click",function(){
varflag=$(".content").is(":hidden");
if(flag){
$(".content").show();
}else{
$(".content").hide();
}
});
*/
/*
//鼠标的移入移出
$(".header").mouSEOver(function(){
$(".content").show();
}).mouSEOut(function(){
$(".content").hide();
});
*/
/*
//合成事件hover()
$(".header").hover(function(){
$(".content").show();
},function(){
$(".content").hide();
});
*/
});
什么是jQuery？
Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，
它兼容CSS3，还兼容各种浏览器(IE6.0+,FF1.5+,Safari2.0+,Opera9.0+)，
jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果，
并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，
而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离，也就是说，
不用再在html里面插入一堆js来调用命令了，只需要定义id即可。
JS鼠标移入移出事件代码范例二html>
百度
#wrap{
width:150px;height:200px;
/*background:rgb(211,211,211);*/
margin:200pxauto0px;
text-align:center;
position:relative;
background:rgb(225,225,225);
}
a{
color:white;
display:inline-block;
width:150px;height:20px;
}
.one{
position:absolute;
left:70px;top:14px;
color:white;
}
#div1{
width:80px;height:81px;
margin:3pxauto0px;
background:white;
}
#div1a{
display:inline-block;
width:78px;
height:25px;
color:black;
font-size:15px;
line-height:25px;
text-decoration:none;
position:relative;
margin:1px1px;
z-index:1;
}
设置
♦
搜索设置
高级搜索
搜索历史
varset=document.getElementById('set');
vardiv1=document.getElementById('div1');
varone=document.getElementsByClassName('one');
vartwo=document.getElementsByClassName('two');
one[0].style.display='none';
div1.style.display='none';
set.onmouSEOver=function(){
one[0].style.display='block';
div1.style.display='block';
}
set.onmouSEOut=function(){
one[0].style.display='none';
div1.style.display='none';
}
two[0].onmouSEOver=function(){
two[0].style.background='rgb(57,139,251)';
}
two[1].onmouSEOver=function(){
two[1].style.background='rgb(57,139,251)';
}
two[2].onmouSEOver=function(){
two[2].style.background='rgb(57,139,251)';
}
two[0].onmouSEOut=function(){
two[0].style.background='white';
}
two[1].onmouSEOut=function(){
two[1].style.background='white';
}
two[2].onmouSEOut=function(){
two[2].style.background='white';
}
div1.onmouSEOver=function(){
one[0].style.display='block';
div1.style.display='block';
}
div1.onmouSEOut=function(){
one[0].style.display='none';
div1.style.display='none';
}
one[0].onmouSEOver=function(){
one[0].style.display='block';
div1.style.display='block';
}
one[0].onmouSEOut=function(){
one[0].style.display='none';
div1.style.display='none';
}
进入页面时的效果是这样的：
当鼠标移入设置上时，效果是这样的：
当鼠标移入下面的选项的时候，背景颜色会变成蓝色：
到鼠标移出设置或下面的3个选项时，页面就如第一张图所示。
以上是JS写法，下面是JQ的写法
JQ的鼠标移入移出事件可以用两个函数写，亦可以用一个函数写：
1、var a = $("#wrap");
a.on("mouSEOver",function(){"鼠标移入时想要的效果"})；
a.on("mouSEOut",function(){"鼠标移出事想要的效果"})；
2、这一种方法类似于css中的hover效果，相对比而言更简单一点：
var a = $("#wrap");
a.hover(function(){"鼠标移入的效果"},function(){“鼠标移出时的效果”})；
jQuery实现鼠标移入移出事件切换功能
分享给大家供大家参考，具体如下：html>
#msg{
color:#3c763d;
background-color:#dff0d8;
border-color:#d6e9c6;
border-radius:4px;
padding:15px;
}
$(function(){
$(msg).on({
mouSEOver:function(){
$(this).wrap("
");
},
mouSEOut:function(){
$(this).unwrap();
}
});
});
HelloWorld!!!
hover()方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
jQuery 1.7 版本前该方法触发mouseenter和mouseleave事件。
jQuery 1.8 版本后该方法触发mouSEOver和mouSEOut事件。
代码运行效果：
