on mouse over in jquery

On Mouse Over in jQuery

If you want to add an event to an element when it is hovered over with a mouse, you can use the .hover() method in jQuery. This method takes two functions as arguments - one for when the mouse enters the element, and one for when it leaves the element.

Example Code:


$(document).ready(function(){
  $("div").hover(
    function(){
      $(this).css("background-color", "yellow");
    },
    function(){
      $(this).css("background-color", "white");
    }
  );
});

In this example, we have a <div> element that will change its background color to yellow when the mouse enters it, and back to white when the mouse leaves it.

Another way to achieve the same effect is by using the .mouseenter() and .mouseleave() methods:

Example Code:


$(document).ready(function(){
  $("div").mouseenter(function(){
    $(this).css("background-color", "yellow");
  });
  $("div").mouseleave(function(){
    $(this).css("background-color", "white");
  });
});

In this example, we have two separate methods - one for when the mouse enters the element, and one for when it leaves the element. The effect is the same as the previous example, but the code is split into two methods instead of one.

Subscribe to The Poor Coder | Algorithm Solutions

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]
Subscribe