jQuery Events

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body style="font-family: sans-serif; padding: 20px;">
    <h2>Event Hover (mouseenter & mouseleave)</h2>
    <div id="kotakHover" style="width:200px; padding:20px; background:#e0f2fe; text-align:center; border-radius:8px; cursor:pointer;">
        Arahkan Kursor ke Sini!
    </div>

    <script>
        $('#kotakHover').on({
            mouseenter: function() { $(this).css('background-color', '#4ade80'); },
            mouseleave: function() { $(this).css('background-color', '#e0f2fe'); }
        });
    </script>
</body>
</html>