jQuery hover()和mouseover()的区别用法及代码示例

在了解两者之间的区别之前hover() 和mouseover()jQuery 的方法，我们简单看一下这两个方法。

hover()方法：当我们将鼠标光标悬停在任何元素上时，会发生两个事件，即mouseenter()r和mouseleave().

mouseenter: 当我们将光标移到元素上时。
mouseleave: 当我们从元素上移除光标时。

hover()方法绑定 mouseenter 和 mouseleave 事件的处理程序。本质上，使用 hover() 方法，我们将指定当光标进入该元素时要执行的操作，以及当光标离开该元素时要执行的操作。

用法:

$( selector ).hover( handlerIn, handlerOut )

Parameters: 它接受两个函数，即 handlerIn 和 handlerOut。

handlerIn: 当光标进入元素时将执行该函数。
handlerOut:(可选)当光标离开元素时执行此函数。

当我们只提供一个函数作为 hover() 方法的参数时，那么该函数将针对 mouseenter 和 mouseleave 事件执行。

例子：在这个例子中，我们将看到如何使用hover()方法。我们有一个单词，每当光标进入该元素时，我们都会尝试更改它的颜色。当光标离开该元素时，颜色会变返回。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- jQuery library -->
    <script src= 
"https://code.jquery.com/jquery-git.js"> 
    </script> 
</head> 
  
<body> 
    <h2>GeeksforGeeks</h2> 
  
    <script> 
  
        // Calling hover() method  
        // on h1 tag 
        $("h2").hover( 
  
            // mouse-enter event 
            function () { 
  
                // changing the color 
                $("h2").css('color', 'green') 
            }, 
  
            // mouse-leave event 
            function () { 
  
                // Putting the color back 
                $("h2").css('color', 'black') 
            }) 
    </script> 
</body> 
  
</html>

输出：

悬停法

Mouseover()方法：当鼠标悬停事件发生时，将执行mouseover()方法。当光标进入元素时，会发生 mouseover 事件，然后将执行该元素的 mouseover() 方法。我们还可以附加一个在调用 mouseover() 方法时执行的函数。

用法:

$(selector).mouseover(handler)

参数：(可选)它接受一个函数，当mouseover()方法被调用。

Example:在此示例中，我们将了解如何使用mouseover()方法。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- jQuery library -->
    <script src= 
    "https://code.jquery.com/jquery-git.js"> 
    </script> 
</head> 
  
<body> 
    <h2>GeeksforGeeks</h2> 
  
    <script> 
        $("h2").mouseover( 
            function () { 
                // changing the color 
                $("h2").css('color', 'red') 
            }) 
    </script> 
</body> 
  
</html>

输出：

hover()和mouseover()方法的区别：

hover()	mouseover()
将两个处理程序绑定到匹配的元素，当光标进入和离开元素时执行。	将一个处理程序绑定到匹配的元素，当光标进入元素时执行。
它最多接受两个函数作为参数，一个用于鼠标输入和一个用于鼠标离开事件。	它最多接受一个函数作为参数，当鼠标移到事件发生。
在里面hover()方法，当光标进入该元素或其子元素时，处理程序输入函数被调用一次，当光标离开元素时，处理程序输出函数被调用一次。	在里面mouseover()方法，我t 的工作方式与hover()方法，但对于嵌套元素，当光标进入附加了 mouseover 事件的外部部分时，会调用 mouseover() 方法，但当光标进入内部部分时，会再次调用 mouseover() 方法。
handlerIn 和 handlerOut 函数将在每个元素每次进入和退出时调用一次	对于嵌套元素，此方法可以多次触发。

相关用法

注：本文由纯净天空筛选整理自hritikrommie大神的英文原创作品 Difference between hover() and mouseover() methods in jQuery。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。