Home >Web Front-end >JS Tutorial >Introduction to jquery hover usage

Introduction to jquery hover usage

黄舟Original: 2017-06-26 11:05:093847browse

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"); } );

out Description:

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

jQuery code:

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

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

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

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How does jquery use undelegate to remove events bound to dynamically created elements using delegate?Next article：How does jquery use undelegate to remove events bound to dynamically created elements using delegate?

See more

Introduction to jquery hover usage

Related articles