jQuery mouseover() Method

jQuery mouseover() event occurs when a mouse pointer is enters into any child elements as well as the selected element. The jQuery mouseover method triggers the mouseover event, and when mouseover event occurs specified function will execute.

This method is usually used together with the mouseout() method.

Difference between mouseenter() and mouseover() event

jQuery mouseenter() event only triggers when a mouse pointer is enters into the selected element. Whereas mouseover() event is triggers when a mouse pointer is enters into the selected element as well as any child elements inside it.

Syntax

This syntax represent to the mouseover() method

$(selector).mouseover();        // This syntax does not accept any arguments.

and this syntax represent to attach a function to the mouseover event

$(selector).mouseover(function);
Parameter Type Description
function Function Optional. Specifies the function to execute when the mouseover is occurs

Examples

This example represent the mouseover event

$(document).ready(function(){
  $("div").mouseover(function(){
    $("input").css("background-color", "yellow");
  });
  $("div").mouseout(function(){
    $("input").css("background-color", "pink");
  });
  $("#btn1").click(function(){
    $("div").mouseover();
  });    
  $("#btn2").click(function(){
    $("div").mouseout();
  });
});

Run it...   »


This example represent to attach a function to the mouseover event.

$(document).ready(function(){
  $("div").mouseover(function(){
    $("input").css("background-color", "yellow");
  });
  $("div").mouseout(function(){
    $("input").css("background-color", "pink");
  });
});

Run it...   »