CODEWITHSUNDEEP
jqueryhtml
user1737842
user1737842

Reputation:

Mouseover v/s hover in Jquery

This question is info related. Im new to jquery. I am pretty experienced in HTML & CSS.

What is the difference between Hover & Mouseover in Jquery. Ain't they both activated when hovering over an element.

Upvotes: 7

Views: 9327

Answers (2)

Praveen
Praveen

Reputation: 56509

mouseover(): Fire events for the children of that element.

hover(): Hover actually works with mouseenter and mouseleave without firing for children.

To achieve hover effect, we need both mouseover and mouseout event

$("element").mousover(function(){ 
    //do something over
}).mouseout(function() { 
    //do something out
});

whereas in hover() it is just a call back.

$("element").hover(
  function () {
    //do something enter
  }, 
  function () {
    //do something exit
  }
);

From David Jones's experience:

In the project I was working on I setup a container div to use mouseover and mouseout which added some html tabs to the container. This seemed perfectly fine but I discovered that using mouseover/mouseout meant the added html kept disappearing when I tried to interact with it along with the other jquery I had in place that was conflicting with it.

In the end my particular solution required me to use mouseenter and mouseleave with the live function rather than using hover because I was working with generated html.

Upvotes: 9

AnaMaria
AnaMaria

Reputation: 3621

The hover() function is more high level - it's built to call functions to handle both a mouseenter event and a mouseleave event. It's very convenient for a UI element that has a hover and normal state (e.g. a button.)

The mouseover() function specifically binds to the mouseover event. It's best for situations where you only care when the mouse has crossed the border into an element and you don't really care what happens if it leaves. It's also the function to call when you want to trigger the event on some element.

EXPLANATION FROM: http://www.quora.com/jQuery/What-is-the-difference-between-the-hover-and-mouseover-functions

Upvotes: 6

Related Questions