When discussing web development and programming, one of the topics we address is managing mouse events in the browser. In localhost development environments, understanding how to manage user interactions can be very beneficial. This article will explore managing the MouseEnter and MouseLeave events for multiple elements on a web page.
Imagine you have a web page that contains several different elements and you want to observe behaviors when the mouse enters and exits. This action not only adds more attractiveness but can also help users to interact more with your page.
Assume you have a page that includes several div each with a specific color. You want to change the color of each element when the mouse hovers over it, and return to its original state when the mouse pointer leaves.
To achieve this goal, we can benefit from JavaScript capabilities. In the example below, a JavaScript code is provided for managing MouseEnter and MouseLeave events for several div elements.
Code Example
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Mouse Events Example</title>
<style>
.box { width: 100px; height: 100px; margin: 10px; display: inline-block; }
.box1 { background-color: red; }
.box2 { background-color: green; }
.box3 { background-color: blue; }
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<script>
document.querySelectorAll('.box').forEach(item => {
item.addEventListener('mouseenter', event => {
item.style.backgroundColor = 'yellow';
})
item.addEventListener('mouseleave', event => {
const originalBg = item.classList.contains('box1') ? 'red' :
item.classList.contains('box2') ? 'green' :
'blue';
item.style.backgroundColor = originalBg;
})
});
</script>
</body>
</html>
Line by Line Explanation
<!DOCTYPE html> This line specifies the document type as HTML.
<html lang="fa"> Defines the language of the page as Persian.
<style> Here, styles are defined that specify the size and main color of the
div elements. <div class="box box1"></div> Each
div is identified by a unique class for distinguishing its original color. document.querySelectorAll('.box').forEach(...) Using
querySelectorAll to select all elements with the class box and add events to them. addEventListener('mouseenter', ...) Adding the
mouseenter event to each element to change its color to yellow when the mouse enters. addEventListener('mouseleave', ...) Adding the
mouseleave event to revert the original color of the element when the mouse exits.