jquery
  1. jquery-mouseover
PreviousNext

JQuery mouseover() Method

The JQuery mouseover() method is a built-in event method that attaches an event handler function to the specified element when the mouse pointer enters the element.

Syntax

$(selector).mouseover(function);

The selector refers to the HTML element to attach the event handler to, and the function is the code to be executed when the mouseover event is triggered.

Use

The mouseover() method is commonly used to create interactive effects and animations on web pages. For example, you can use it to change the background color of a button when the user hovers over it, or to display a tooltip when the user hovers over an image.

Example

Here is an example of using JQuery mouseover() method to change the background color of a button:

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Mouseover()</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
    <button>Click me!</button>
    <script>
        $(document).ready(function(){
            $("button").mouseover(function(){
                $(this).css("background-color", "#ff0000");
            });
        });
    </script>
</body>
</html>
Try Playground

In this example, we use the mouseover() method to change the background color of a button from green to red when the user hovers over it. The css() method is used to modify the CSS of the selected element.

Summary

The mouseover() method in JQuery is a useful tool for creating interactive effects on web pages. Whether you need to animate elements, change styles, or trigger some other action, mouseover() provides a simple and effective way to make your website more engaging and user-friendly.

mouseup()mouseout()
Published on: