How to occur mouseenter and mouseleave event on html page and how to handle this events?

Asked 28-Jul-2021
Viewed 175 times

1

1 Answer


1

jQuery mouseenter() event, when we move mouse in one of the element area then mouseenter event is activated but if we move the same mouse then mousealeave event gets activated.

Syntax

$(selector).mouseleave()
$(selector).mouseleave(function)
$(selector).mouseenter()
$(selector).mouseenter(function)
<!doctype html>

<html lang='en'>
<head>
    <!-- Required meta tags -->
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <!-- Bootstrap CSS -->
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Submit Event demo</title>
</head>
<body>
    <div class='container'>
        <h1 class='text-center mt-5'>mouseleave and mouseenter event</h1>
        <div class='bg-primary text-white p-4 rounded-3 text-center' id='div1' >
               When you hover or leave this box, you will see the effect in below box.
        </div>
        <p class=' m-2 bg-warning p-1 rounded-3 text-capitalize px-5'></p>
    </div>
    <script>
        $(document).ready(function () {
            $('#div1').mouseleave(function () {
                $('p').text('mouse leave');
            });
            $('#div1').mouseenter(function () {
                $('p').text('mouse enter');
            });
        });
    </script>
    <script src='https://code.jquery.com/jquery-3.3.1.slim.min.js' integrity='sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo' crossorigin='anonymous'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js' integrity='sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1' crossorigin='anonymous'></script>
    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous'></script>
</body>
</html>

How to occur mouseenter and mouseleave event on html page and how to handle this events?