本文概述
- jQuery mouseout()事件的参数
- jQuery mouseout()事件的示例
- jQuery mouseout()事件示例2
此事件通常与mouseover()事件一起使用。
注意:大多数人对mouseout和mouseleave感到困惑。
mouseleave和mouseout之间的区别
仅当鼠标指针离开所选元素时才触发mouseleave事件, 而鼠标光标离开任何子元素以及所选元素时都将触发mouseout事件。
句法:
$(selector).mouseout()
它触发选定元素的mouseout事件。
$(selector).mouseout(function)
【jQuery mouseout()】它为mouseout事件添加了一个函数。
jQuery mouseout()事件的参数
参数 | 描述 |
---|---|
Function | 它是一个可选参数。当触发mouseout事件时, 它将自行执行。 |
<
!DOCTYPE html>
<
html>
<
head>
<
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<
/script>
<
script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "lightgreen");
});
$("p").mouseout(function(){
$("p").css("background-color", "orange");
});
});
<
/script>
<
/head>
<
body>
<
p>
Move your cursor over this paragraph.<
/p>
<
/body>
<
/html>
立即测试
输出:
将光标移到该段上。
jQuery mouseout()事件示例2让我们看一下jQuery mouseout()事件的另一个示例。
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
meta charset="utf-8">
<
title>
mouseover demo<
/title>
<
style>
div.out {
width: 40%;
height: 120px;
margin: 0 15px;
background-color: lightgreen;
}
div.in {
width: 60%;
height: 60%;
background-color: red;
margin: 10px auto;
}
<
/style>
<
script src="http://img.readke.com/220429/21164R406-1.jpg">
<
/script>
<
/head>
<
body>
<
div class="out">
<
span style="padding:20px">
move your mouse<
/span>
<
div class="in">
<
/div>
<
/div>
<
script>
$( "div.out" )
.mouseover(function() {
$( this ).find( "span" ).text( "mouse over " );
})
.mouseout(function() {
$( this ).find( "span" ).text( "mouse out " );
});
<
/script>
<
/body>
<
/html>
立即测试
输出:
推荐阅读
- jQuery mouseover()
- jQuery mouseleave()
- jQuery mouseenter()
- jQuery mousedown()
- jQuery load()
- jQuery keyup()
- jQuery keypress()
- jQuery keydown()
- jQuery insertAfter()