In computing, a mouseover , mouse hover or hover box is a graphical control element that is activated when the user moves or hovers the pointer over a trigger area, usually with a mouse, but also possible with a digital pen. Mouseover control elements are common in web browsers.
The mouseover event triggers when the mouse pointer enters the div element, and its child elements. The mouseenter event is only triggered when the mouse pointer enters the div element. The onmousemove event triggers every time the mouse pointer is moved over the div element.
The mouseover() method triggers the mouseover event, or attaches a function to run when a mouseover event occurs. Note: Unlike the mouseenter event, the mouseover event triggers if a mouse pointer enters any child elements as well as the selected element.
.mouseover()
.hover()
Bind one or two handlers
to the matched elements, to be executed when the mouse pointer
enters and leaves the elements.
Calling $(selector).hover(handlerIn, handlerOut)
is shorthand for:
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
.mouseenter()
Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.
mouseover
fires when the pointer moves into the child element as
well, while mouseenter
fires only when the pointer moves into the
bound element.
Because of this, .mouseover()
is not the same as .hover()
, for the same reason .mouseover()
is not the same as .mouseenter()
.
$('selector').mouseover(over_function) // may fire multiple times
// enter and exit functions only called once per element per entry and exit
$('selector').hover(enter_function, exit_function)
.hover()
function accepts two function arguments, one for mouseenter
event and one for mouseleave
event.
You can try it out http://api.jquery.com/mouseover/ on the jQuery doc page. It's a nice little, interactive demo that makes it very clear and you can actually see for yourself.
In short, you'll notice that a mouse over event occurs on an element when you are over it - coming from either its child OR parent element, but a mouse enter event only occurs when the mouse moves from the parent element to the element.
From the offical docs: (http://api.jquery.com/hover/)
The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.
As you can read at http://api.jquery.com/mouseenter/
The mouseenter JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With