How to use JQuery Event mouseenter() Method

This article describe about jQuery Event mouseenter() Method.
  • 2533

jQuery Event mouseenter() Method

When mouse pointer over the an element then mouseenter event occur, but this event is used now a days  with the mouseleave event.

And the mouseenter() method triggers the mouseenter event, it is also define what will happens when mouseenter event occurs.

Note: This event only trigger when mouse pointer enter the selected element. Unlike the mouseover event. And also mouseover trigger only when mouse pointer enter the child element

Example

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("p").mouseenter(function () {

            $("p").css("background-color", "red");

        });

        $("p").mouseleave(function () {

            $("p").css("background-color", "Gray");

        });

    });

</script>

</head>

<body>

<p style="background-color:#E9E9E4">The mouse pointer over this paragraph then hover.</p>

</body>

</html>

 

Output

 

mouseenter method pic47.jpg

 

Trigger the mouseenter Event

It is generate trigger for the selected element.

 

Example

 

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("p").mouseenter(function () {

            $("p").css("background-color", "red");

        });

        $("p").mouseleave(function () {

            $("p").css("background-color", "Gray");

        });

        $("#btn1").click(function () {

            $("p").mouseenter();

        });

        $("#btn2").click(function () {

            $("p").mouseleave();

        });

    });

</script>

</head>

<body>

<p style="background-color:#E9E9E4">The mouse pointer over this paragraph then hover.</p>

<button id="btn1">mouseenter event activate for the paragraph</button><br />

<button id="btn2">mouseleave event Activate for the paragraph</button>

</body>

</html>

 

Output

 

mouseenter method pic48.jpg

 

Bind a Function to the mouseenter Event

It is define a function to run when mouseenter event generate the trigger.

 

Syntax

 

$(selector).mouseenter(function)

You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.