How to set hover in jquery

In front-end development, elements on the web page usually need to interact with the user's mouse. The most common one is the hover effect: when the mouse hovers over the element, the element will undergo some visual changes, such as color, size etc. At this time we need to use the hover method in jQuery to achieve this.

Let me introduce in detail how to use the hover method in jQuery to set the hover effect.

1. The basic syntax of the hover() method in jQuery

We first need to understand the basic syntax of the hover() method:

$(selector).hover(inFunction,outFunction)

Among them, the selector is the selected one Element, inFunction is the function to be executed when the mouse moves over the element, and outFunction is the function to be executed when the mouse moves out of the element. It can be seen that through the hover() method, we can execute different functions when the mouse moves in and out of the element.

2. Use the hover() method to set the hover effect

Next, let’s demonstrate how to use the hover() method to set the hover effect.

First, we need to introduce the jQuery library into the page:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Next, we create a sample element and add some css styles:

<div class="example">hover me</div>

<style>
.example {
    width: 100px;
    height: 50px;
    background-color: #FFC0CB;
    border-radius: 10px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    cursor: pointer;
}
</style>

Now, let’s give This example element sets the hover effect. When the mouse moves in, the background color is changed and the text content is modified; when the mouse moves out, the element is restored to its initial state.

<script>
$(function() {
    $(".example").hover(function() {
        // 鼠标移入时执行的函数
        $(this).css("background-color", "#ffc73d");
        $(this).text("hovered");
    }, function() {
        // 鼠标移出时执行的函数
        $(this).css("background-color", "#FFC0CB");
        $(this).text("hover me");
    });
});
</script>

Explain the above code:

• $() function is used to select elements. Here, the element with class example is selected;
• hover() method Pass in two functions, the first function is the function to be executed when the mouse moves in, and the second function is the function to be executed when the mouse moves out;
• Modify the style of the element in these two functions.

In this way, a simple hover effect is achieved.

3. Other uses of the hover() method

In addition to the above usage, the hover() method has other uses.

1. hover(handlerInOut)

This usage only needs to pass in a function, and this function will be set as the handler function for the mouse move-in and mouse-out events at the same time. For example:

$(function() {
    $(".example").hover(function() {
        $(this).css("background-color", "#ffc73d");
    });
});

In this way, when the mouse moves into the .example element, the background color will change to #ffc73d. No changes will occur when removed.

2. hover(enterHandler,leaveHandler)

This usage is similar to hover(inFunction,outFunction), except that the parameter positions of the function are different. For example:

$(function() {
    $(".example").hover(function() {
        $(this).css("background-color", "#ffc73d");
    }, function() {
        $(this).css("background-color", "#FFC0CB");
    });
});

In this way, when the mouse moves into the .example element, the background color will change to #ffc73d. It will be restored when removed.

4. Summary

The above is how to use jQuery’s hover() method to set the hover effect. When using it, we only need to select the element to which the effect is to be set, and then pass in the corresponding function through the hover() method.

Of course, in actual development, we may also need more complex hover effects, such as animation effects, etc. In this case, jQuery provides a powerful animation effect library, which we can use to achieve richer hover effects.

Generally speaking, the hover() method provided by jQuery can quickly and effectively achieve the hover effect of web page elements, which greatly improves the efficiency of front-end development and allows developers to focus more on the implementation of business logic.

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