jQuery mouseover() jQuerymouseover()|jQuery

本文概述

jQuery mouseover()事件的参数
jQuery mouseover()事件的示例
jQuery mouseover()事件示例2

当你将鼠标指针悬停在所选元素上时, 将发生mouseover事件。一旦发生mouseover事件, 它将执行mouseover()方法或附加一个要运行的函数。
此事件通常与mouseout()事件一起使用。
注意：大多数人对mouseenter和mouseover感到困惑。
mouseenter()和mouseover()之间的区别
仅当鼠标指针输入所选元素时才触发mouseenter事件, 而鼠标光标输入任何子元素以及所选元素时都将触发mouseover事件。
句法：

$(selector).mouseover()

它触发选定元素的mouseover事件。

$(selector).mouseover(function)

它将一个功能添加到mouseover事件。
jQuery mouseover()事件的参数

参数	描述
Function	它是一个可选参数。触发mouseover事件时, 它会自行执行。

jQuery mouseover()事件的示例让我们以一个示例来演示jQuery mouseover()事件。

< !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 mouseover()事件示例2让我们看一下jQuery mouseover()事件的另一个示例。

< !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/211G42U3-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()】输出：