jQuery Mouse Enter and Leave Events

mouseenter runs when the pointer enters an element and mouseleave runs when it leaves. They are useful when you want clear entry and exit behavior without repeated triggers from child elements.

mouseenter Syntax Top ↑

$( selector ).on( "mouseenter", function () {
    // Pointer entered.
});

mouseleave Syntax Top ↑

$( selector ).on( "mouseleave", function () {
    // Pointer left.
});

Handle Entry and Exit Top ↑

$( function () {
    $( "#t123" ).on( "mouseenter", function () {
        $( "#d1" ).text( "Mouse entered the area" );
    });

    $( "#t123" ).on( "mouseleave", function () {
        $( "#d1" ).text( "Mouse left the area" );
    });
});

Example HTML Top ↑

<textarea id="t123" rows="4" cols="60">
Bring your mouse inside this area and then take it out.
</textarea>
<div id="d1"></div>

Open the mouse-event demo →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: