Detailed explanation of the use of jQuery.mouseover() function

The mouseover() function is used to bind a handler function to the mouseover event of each matching element. This function can also be used to trigger the mouseover event. In addition, you can also pass some additional data to the Event Handling function.

The mouseover event is triggered when the mouse enters an element. It is similar to the mouseenter event, but the mouseenter event will only be triggered when the mouse enters the current element, while the mouseover event will be triggered when the mouse enters the current element and any of its descendant elements (in other words, the mouseover event supports bubbling).

In addition, you can call this function multiple times for the same element to bind multiple event handlers. When the mouseover event is triggered, jQuery will execute the bound event processing functions in the order of binding.

To delete an event bound via mouseover(), use the unbind() function.

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.mouseover( [[ data ,]  handler ] )

If at least one parameter is specified, it means binding the handler function of the mouseover event; if no parameters are specified, it means the mouseover event is triggered.

Parameters

jQuery 1.4.3 New support: mouseover() supports data parameters.

This in the parameter handler points to the current DOM element. mouseover() will also pass in a parameter to the handler: the Event object representing the current event.

Return value

mouseover()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

Please refer to the following HTML sample code:

<div>
    <p id="p1">CodePlayer</p>
    <p id="p2">专注于编程技术开发分享</p>
    <p id="p3">http://www.365mini.com</p>
</div>
<span id="msg"></span>

Now, we bind a handler function to the mouseover event of the

element (you can bind multiple , executed in sequence according to the binding order when triggered):

mouseover只会在鼠标进入

元素时才会触发，而mouseover会在鼠标进入

元素或任何

元素时触发。例如：从p1进入p2也会触发

元素的mouseover事件，但不会触发

元素的mouseenter的事件。

var count = 0;

// 记录触发div元素的mouseover事件的次数
$("div").mouseover(function(){
    $("#msg").html( "触发mouseover的次数：" + ( ++count ) );
});

// 鼠标移入div元素就改变背景颜色
$("div").mouseover(function(){
    $(this).css( "background", "#eee" );
});


// 触发mouseover事件
// $("div").mouseover( );

我们还可以为事件处理函数传递一些附加的数据。此外，通过jQuery为事件处理函数传入的参数Event对象，我们可以获取当前事件的相关信息(比如事件类型、触发事件的DOM元素、附加数据等)：

var cssStyle = { background: "#eee", color: "blue" };

//鼠标移入div元素就设置指定的css样式
$("div").mouseover( cssStyle, function(event){
    var style = event.data;
    $(this).css( style );
} );

The above is the detailed content of Detailed explanation of the use of jQuery.mouseover() function. For more information, please follow other related articles on the PHP Chinese website!