Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别

定义和用法

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

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

jQuery 1.8 版本后该方法触发 mouseover和 mouseout事件。

语法

$(selector).hover(inFunction,outFunction)//inFunction 必需,规定 mouseover 事件发生时运行的函数;outFunction 可选,规定 mouseout 事件发生时运行的函数。

调用: $( selector ).hover( handlerIn, handlerOut )

等同以下方式:$( selector ).mouseover( handlerIn ).mouseout( handlerOut );

注意:如果只规定了一个函数,则它将会在 mouseover 和 mouseout 事件上运行。

调用:$(selector).hover(handlerInOut)等同于:$( selector ).on( "mouseover mouseout", handlerInOut );

区别

mouseout 事件在鼠标离开任意一个子元素及选的元素时触发。

mouseleave 事件只在鼠标离开选取的的元素时触发。

参考

http://www.runoob.com/jquery/event-hover.html

时间: 2024-10-08 10:34:38

Jquery hover方法使用及 mouseenter与mouseleave和 mouseover与mouseout的区别的相关文章

JavaScript里mouseenter和mouseleave与mouseover和mouseout的区别

今天总结下mouseenter.mouseleave.mouseover.mouseout的区别,之前一直懵着用没仔细研究他们的区别,结果终于踢到铁板了. 上代码: <style> div { margin: 0 auto; } .box { box-sizing: border-box; padding: 30px 0; width: 300px; border: 1px solid #005AA0; } .sonBox { width: 150px; height: 150px; back

jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mouseover’的事件,即使添加了event.stopPropagation();return false; mouseout: 鼠标离开元素和离开它的子元素时都会触发‘mouseout’的事件,即使添加了event.stopPropagation();return false;

jQuery hover() 方法 -《狗嗨默示录》-

jQuery hover() 方法 实例 当鼠标指针悬停在上面时,改变 <p> 元素的背景颜色: $("p").hover(function(){    $("p").css("background-color","yellow");},function(){    $("p").css("background-color","pink");}); 尝试一

jQuery中hover与mouseover和mouseout的区别分析

本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件.两个没什么区别,应该是一样的.但昨天一个动画效果才让我见识了,这两个并不能等同. <div class="wrapper"> <div class="img"></div> <div class="tex

hover和mouseover,mouseout的区别

说道hover和mouseover,mouseout的区别,不得不联系到mouseenter,mouseleave. mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触发. mouseenter,mouseleave是指鼠标指针在穿过/离开被选元素时触发. 举个简单例子: <div class="wapper"> <h1></h1> <p></p> </div> <div cl

mouseenter(fn)和mouseleave、mouseover和mouseout的的区别

$('.box1').mouseenter(function(){//穿入事件mouseenter $(this).css('background','red'); }).mouseleave(function(){ $(this).css('background','green'); }) 再看看看一张效果图片: 这貌似和移入.移出事件区别.如果在.box1添加一个层,会怎么样了??? <div class="box1"> <p></p> <

jQuery hover() 方法

1 $("p").hover(function(){ 2 $("p").css("background-color","yellow"); 3 },function(){ 4 $("p").css("background-color","pink"); 5 }); 语法 $(selector).hover(inFunction,outFunction) 调用: $(

第二十七课:滚轮事件,mouseenter与mouseleave事件的修复

滚轮事件 jQuery核心库没有对mousewheel事件的差异性进行处理,但作为一个常用的事件,本文讲解一下. mousewheel事件只有火狐浏览器不支持.mousewheel用于取得滚动距离的属性名为event.wheelDelta,往上滚一圈是120,往下滚一圈是-120.在IE6-8下,window无法绑定mousewheel事件,Opera,Safari,Chrome可以. 火狐下使用DOMMouseScroll来代替mousewheel事件.用于取得滚动距离的属性名为event.d

jQuery CSS()方法改变CSS样式实例解析

转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456');//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接.//.css(‘