Notifications
Clear all
JavaScript Events
1
Posts
1
Users
0
Reactions
68
Views
Topic starter
18/09/2024 5:37 pm
Create a dropdown menu that appears when the user hovers over a button and disappears when the mouse leaves the dropdown area.
Use Case: Hover Dropdown Menu
You want a dropdown to show when the user hovers over a button, and hide when the user moves the mouse away.
Example:
<button id="menuButton">Menu</button>
<div id="dropdownMenu" style="display: none; border: 1px solid black; width: 150px;">
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a>
</div>
<script>
const menuButton = document.getElementById('menuButton');
const dropdownMenu = document.getElementById('dropdownMenu');
menuButton.addEventListener('mouseover', function() {
dropdownMenu.style.display = 'block';
});
dropdownMenu.addEventListener('mouseleave', function() {
dropdownMenu.style.display = 'none';
});
</script>
