In this post, we are going to see a simple jQuery example on how to show a div when the mouse is inactive and hide when the mouse is active again.
If you are looking the other way around, I have an example already here: Hide a div when the mouse is inactive for 5 seconds, show when the mouse is active! – TheOnlyTutorials.com
<html>
<head>
<style>
#showdiv{
width: 250px;
border-radius: 10px;
padding: 10px;
border: 2px double gray;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var timedelay = 1;
function delayCheck() {
if (timedelay == 1) {
$('#showdiv').fadeIn();
timedelay = 1;
}
timedelay = timedelay+1;
}
$(document).mousemove(function() {
$('#showdiv').fadeOut();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 500);
});
// page loads starts delay timer
_delay = setInterval(delayCheck, 500)
</script>
</head>
<body>
<div id="showdiv">
<h2>hide me when the mouse is active</h2>
</div>
</body>
</html>
Click the below button to see the demo of the above script:
