jQuery中hover()和mouseover()方法的区别

在学习hover()之间的区别之前 和 jQuery 的mouseover()方法，让我们简要地看一下这两种方法。

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

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

hover()方法绑定了mouseenter和mouseleave事件的处理程序。基本上，使用hover()方法，我们将指定当光标进入元素时要做什么，我们将指定当光标离开该元素时要做什么。

句法：

$( selector ).hover( handlerIn, handlerOut )

参数：它接受两个函数，即handlerIn 和handlerOut。

• handlerIn：当光标进入元素时会执行这个函数。
• handlerOut：（可选）当光标离开元素时执行此函数。

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

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

HTML

  

    
    
    

  

    GeeksforGeeks
  
    
  
        // 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')
            })
    

  

输出：

悬停方法

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

句法：

$(selector).mouseover(handler)

参数：（可选）它接受一个函数，该函数将在调用mouseover()方法时执行。

示例：在这个示例中，我们将看到如何使用 mouseover() 方法。

HTML

  

    
    
    

  

    GeeksforGeeks
  
    
        $("h2").mouseover(
            function () {
                // changing the color
                $("h2").css('color', 'red')
            })
    

  

输出：

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

hover()	mouseover()
Bind two handlers to the matched elements, to be executed when the cursor enters and leaves the elements.	Bind one handler to the matched elements, to be executed when the cursor enters the elements.
It accepts a maximum of two functions as arguments, one for the mouseenter and one for the mouseleave event.	It accepts a maximum of one function as an argument which will be executed when a mouseover event occurs.
In the hover() method, when the cursor enters the element or its child element, the handlerIn function is called once and when the cursor leaves the element, the handlerOut function is called once.	In the mouseover() method, it works the same as in the hover() method, but in the case of nested elements, When the cursor enters the outer part on which the mouseover event is attached, the mouseover() method gets called, but when the cursor enters the inner part, the mouseover() method calls again.
The handlerIn and handlerOut function will be called once per element per entry and exit	This method can fire multiple times in the case of the nested elements.