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

1 votes
44 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

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

1 Answer

1 votes
Ravi Vishwakarma answered 03-Aug-2021 by Ravi Vishwakarma

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?