个人理解:
jQuery鼠标移动事件是最常用的鼠标事件之一,当用户使用鼠标在指定的元素上移动时即与该元素产生交互,就会触发鼠标移动事件,比如:鼠标在指定元素上移入、移出、悬停等等操作,都属于鼠标移动事件的范围。
说明:
当鼠标指针穿过(进入)被选元素时,会发生 mouseenter
事件。mouseenter()
方法触发 mouseenter
事件,或添加当发生 mouseenter
事件时运行的函数。
当鼠标指针离开被选元素时,会发生 mouseleave
事件。mouseleave()
方法触发 mouseleave
事件,或添加当发生 mouseleave
事件时运行的函数。
通常mouseenter
事件与mouseleave
事件一起搭配使用。
语法:
触发被选元素的 mouseenter
与mouseleave
事件:
$(selector).mouseenter()
$(selector).mouseleave()
添加函数到 mouseenter
与mouseleave
事件:
$(selector).mouseenter(function)
$(selector).mouseleave(function)
解释:
mouseenter()
与mouseleave()
事件函数的参数是回调函数,可选项,当mouseenter
事件与mouseleave
事件被触发时,该回调函数就会执行。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color","lightgray");
});
});
</script>
</head>
<body>
<p>鼠标移动到该段落。</p>
</body>
</html>
说明:
当鼠标指针位于元素上方时,会发生 mouseover
事件。mouseover()
方法触发 mouseover
事件,或添加当发生 mouseover
事件时运行的函数。
当鼠标指针离开被选元素时,会发生 mouseout
事件。mouseout()
方法触发 mouseout
事件,或添加当发生 mouseout
事件时运行的函数。
通常mouseover
事件与mouseout
事件会一起搭配使用。
语法:
触发被选元素的 mouseover
与mouseout
事件:
$(selector).mouseover()
$(selector).mouseout()
添加函数到 mouseover
与mouseout
事件:
$(selector).mouseover(function)
$(selector).mouseout(function)
解释:
mouseover()
与mouseout()
事件函数的参数是回调函数,可选项,当mouseover
事件与mouseout
事件触发时,该回调函数执行。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","lightgray");
});
});
</script>
</head>
<body>
<p>鼠标移动到这个段落上。</p>
</body>
</html>
mouseenter与mouseover事件的区别:
mouseover
事件在鼠标移动到选取的元素及其子元素上时触发 。
mouseenter
事件只在鼠标移动到选取的元素上时触发。
mouseleave与mouseout事件的区别:
mouseout
事件在鼠标离开任意一个子元素及选的元素时触发。
mouseleave
事件只在鼠标离开选取的的元素时触发。
详细解释可以查看jQuery事件冒泡
相关词条。
说明:
当鼠标指针在指定的元素中移动时,就会发生 mousemove
事件。mousemove()
方法触发 mousemove
事件,或添加当发生 mousemove
事件时运行的函数。
用户把鼠标移动一个像素,就会发生一次 mousemove
事件。处理所有 mousemove
事件会耗费系统资源。请谨慎使用该事件。
语法:
触发被选元素的 mousemove
事件:
$(selector).mousemove()
添加函数到 mousemove
事件:
$(selector).mousemove(function)
解释:
mousemove()
函数的参数是回调函数,可选项,当mousemove
事件触发时,该函数就会被执行。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).mousemove(function(event){
$("span").text(event.pageX + ", " + event.pageY);
});
});
</script>
</head>
<body>
<p>鼠标指针的坐标是: <span></span>.</p>
</body>
</html>
鼠标移动事件在做网页特效开发时是最常用的事件之一,也是实现用户交互的基本事件,所以掌握好常用的鼠标移动事件,对以后做网页中的特效有很大的帮助。
微信交流:zzxingyun
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/p445098355/article/details/104010382
内容来源于网络,如有侵权,请联系作者删除!