Introduction:

In this article we will explain how to use mouseenter() method in jquery or  how to execute a method when mouse cursor entered in selected HTML element in jQuery.

Description:

The mouseenter() method attach an event handler function to selected HTML element. This function is executed, when the mouse pointer enters over the selected HTML element.

When you enter your mouse cursor over the selected element, it executes the mouseenter() method to attach the event handler function to run.

syntax:

$(selector).mouseenter(function)

jQuery mouseenter() example

Let's take an example to see the mouseenter() event in jQuery.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
   
    <script>
        $(document).ready(function () {
            $("#h1").mouseenter(function () {
                $("div").text("Now you...entered in h1 element").show().fadeOut(2000);
            });
        });
    </script>
</head>
<body>
    <h1 id="h1">Enter this heading.</h1>
    <div></div>   
</body>
</html>

 

In the above code when user try to enter into the area of “h1” element then

Now you...entered in h1 element” will be written inside “div” element.

 Output:

 how to use mouseenter jquery

 I hope it will help to you after reading it.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like