Introduction to jquery hover usage-JS Tutorial-php.cn

Introduction to jquery hover usage

黄舟

Release： 2017-06-26 11:05:09

Original

3800 people have browsed it

Overview

A method that simulates hover events (the mouse moves over and out of an object). This is a custom method that provides a "keep in it" state for frequently used tasks.

When the mouse moves over a matching element, the specified first function will be triggered. When the mouse moves out of this element, the specified second function will be triggered. Moreover, it will be accompanied by detection of whether the mouse is still in a specific element (for example, an image in a div). If so, it will continue to remain in the "hover" state without triggering the move-out event (fixed use of mouseout A common mistake of events).

Parameters

over,outFunction,FunctionV1.0

over: The function to be triggered when the mouse moves over the element

out: The function to be triggered when the mouse moves out of the element Function

outObjectV1.4

Event function that is triggered when the mouse moves on or out of an element

Example

over,out Description:

MouseoverTableAdd specific class

jQuery Code:

$("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );

Copy after login

out Description:

Thehovre() method switches methods by binding the variable "handlerInOut".

jQuery code:

$("td").bind("mouseenter mouseleave",handlerInOut);
$("td").hover(handlerInOut);

Copy after login

$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

<style type="text/css">
.hover {background:red};
</style>

Copy after login

The hover in the brackets in addClass("hover") and removeClass("hover") here only says hover, and there is no need to write anything else, right? The first answer to this

is, it doesn’t have to be hover.

The reason why hover is written in this addClass is because the name of the previous CSS class selector is hover (that is.hover {background:red};). This name can be changed to something else. Here’s a working code for you:

<html>
<head>
<title>hover demo</title>
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
.myStyle {
    background: red
}
;
</style>
</head>
<body>
 
    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
 
    <script>
        $("td").hover(function() {
            $(this).addClass("myStyle");
        }, function() {
            $(this).removeClass("myStyle");
        });
    </script>
 
</body>
</html>

Copy after login

The above is the detailed content of Introduction to jquery hover usage. For more information, please follow other related articles on the PHP Chinese website!