如何在 jQuery 中使用 .on 和 .hover ？

jQuery .on() 方法：此方法用于将事件侦听器附加到元素。此方法等效于 vanilla JavaScript 中的 addEventListener。

句法：

$(element).on(event, childSelector, data, function)

范围

• event：它指定要附加的事件（单击、提交等）。
• childSelector：它是可选参数，它指定可以使用给定事件处理程序的特定子级。
• data：它指定了与函数一起传递的可选数据。
• 函数：它指定触发附加事件时要运行的函数。

例子：

  

    
    
    
  
    
        /* Adding basic styling */
        div {
            background-color: green;
            width: 100px;
            height: 100px;
            color: #fff;
            text-align: center;
        }
    

  

    Normal
    
        $('div').on('click', function () {
  
            // Changing the content
            $(this).html('Clicked!');
        });
    

  

输出：

• 在点击 div 元素之前：
  
• 单击 div 元素后：
  

jQuery .hover() 方法：此方法用于指定鼠标悬停和鼠标移出情况下元素的样式。它接受两个函数作为参数：

• mouseoverFunction：鼠标进入元素时触发。
• mouseoutFunction：当鼠标离开元素时触发。

您可以在这些函数中指定多种样式。

句法：

$(element).hover(mouseoverFunction, mouseoutFunction)

例子：

  

    
    
    
  
    
        /* Adding basic styling */
        div {
            background-color: green;
            width: 100px;
            height: 100px;
            color: #fff;
            text-align: center;
        }
    

  

    Normal
      
    
        $('div').hover(function () { // mouse-in 
            $(this).css("background-color", "blue");
            $(this).html('Hovered!');
        },
            function () { // mouse-out
                $(this).css("background-color", "green");
                $(this).html('Normal');
            }
        )
    

  

输出：

• 鼠标移过之前：
  
• 鼠标移过后：