1
how to occur hover event in html page and how to handle the hover event in JQ?
how to occur hover event in html page and how to handle the hover event in JQ?
1 Answer
1
jQuery hover() is a combination of mouseleave and mouseenter events. this event take two function far managing mouse leave and mouse enter functionality in one event.
Syntax$(selector).hover(enter function(), leave function())
enter function tell the mouse enter event and leave function tell the mouse leave event
<!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'>mouse hover 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').hover(function () {
$(this).removeClass('bg-primary');
$('p').text('mouse hover');
$(this).addClass('bg-danger');
}, function () {
$(this).removeClass('bg-danger');
$('p').text('mouse leave');
$(this).addClass('bg-primary');
});
});
</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>
