20 min25 XP

Mouse Events

Hover, Mouseenter, and Mouseleave

Step 1 of 5

Understanding Mouse Events

Mouse events detect when the user's mouse cursor interacts with elements on your page. They're essential for creating hover effects, tooltips, and interactive elements!

Common Mouse Events:

  • mouseenter: Mouse enters an element
  • mouseleave: Mouse leaves an element
  • mouseover: Mouse moves over element (bubbles)
  • mouseout: Mouse moves out of element (bubbles)
  • mousemove: Mouse moves within element
  • click: Mouse button is clicked
  • dblclick: Mouse button is double-clicked

Real-World Examples

Mouse events power many familiar features:

  • Dropdown menus that appear on hover
  • Tooltips that show when you hover over icons
  • Image galleries with hover previews
  • Buttons that change color when you hover
  • Games that track mouse movement
// Basic hover effect
const button = document.querySelector('.btn')

button.addEventListener('mouseenter', function() {
console.log('Mouse entered!')
})

button.addEventListener('mouseleave', function() {
console.log('Mouse left!')
})