这篇文章主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下。

jQuery实现鼠标移入移出事件切换功能

分享给大家供大家参考，具体如下：html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

jQuery事件-div的显示隐藏及鼠标的移入移出

.header{

width:302px;

height:40px;

background:green;

font-size:20px;

margin-bottom: 0px;

}

.content{

width:300px;

border:1px solid #333;

background:#CCC;

display: none;

margin-top:0px;

}

$(function (){

//显示隐藏

$(".header").click(function (){

var flag = $(".content").is(":hidden");

if(flag){

$(".content").show();

}else{

$(".content").hide();

}

});

/*

//使用bind的绑定事件,跟上上面的效果是一样的

$(".header").bind("click", function (){

var flag = $(".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？

JS鼠标移入移出事件代码范例二html>

百度

#wrap{

width: 150px;height: 200px;

/*background: rgb(211,211,211);*/

margin: 200px auto 0px;

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: 3px auto 0px;

background: white;

}

#div1 a{

display: inline-block;

width:78px;

height: 25px;

color:black;

font-size: 15px;

line-height: 25px;

text-decoration: none;

position: relative;

margin: 1px 1px;

z-index: 1;

}

var set = document.getElementById('set');

var div1 = document.getElementById('div1');

var one = document.getElementsByClassName('one');

var two = 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() ;

}

}) ;

}) ;

Hello World !!!

hover()方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。

jQuery 1.8 版本后该方法触发 mouSEOver 和 mouSEOut 事件。

代码运行效果：