jQuery Mouse Events

This article will explain different mouse events occurring based on mouse positions on a particular HTML element.

Mouse Events in jQuery:

• mouseenter and mouseleave
• mouseup and mousedown
• mouseover and mouseout

mouseenter and mouseleave: The mouseenter event occurs when the mouse is placed over the HTML element and mouseleave event occurs when the mouse is removed from the element. Output:

• On loading the webpage: 👁 Image
  
• MouseEnter and MouseLeave events: 👁 Image
  

MouseUp and MouseDown events:

mouseup and mousedown requires a mouse-click to occur.

Output:

• On landing web page: 👁 Image
  
• MouseUp and MouseDown events: 👁 Image
  

Mouseover and Mouseout:

These events occur when the mouse is placed over some specific HTML element.

Output:

• Onloading web page: 👁 Image
  

• MouseOver and MouseOut events:

  👁 Image