Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to tell if a mouse is hovering over an element

Is there a function I can call to know if a certain element is currently being hovered over, like this?

/* Returns true or false */
hoveringOver("a#mylink");
like image 589
Pieter Avatar asked Apr 02 '10 15:04

Pieter


People also ask

Which event is triggered when a mouse is hovering over an element?

The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children. Tip: This event is often used together with the onmouseout event, which occurs when a user moves the mouse pointer out of an element.

What is hovering with a mouse?

: to position (a computer cursor) over something (such as an image or icon) without selecting it Many in the class hovered their cursors over words and icons for long periods before committing to clicking their mouse.—

Is mouse over same as hover?

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.

When the mouse pointer moves while it is over an element?

The mouseover event occurs when a mouse pointer comes over an element, and mouseout – when it leaves. These events are special, because they have property relatedTarget . This property complements target . When a mouse leaves one element for another, one of them becomes target , and the other one – relatedTarget .


2 Answers

You can use jQuery's hover method to keep track:

$(...).hover(
    function() { $.data(this, 'hover', true); },
    function() { $.data(this, 'hover', false); }
).data('hover', false);

if ($(something).data('hover'))
    //Hovered!
like image 74
SLaks Avatar answered Nov 09 '22 16:11

SLaks


Yes, in classic JS:

document.getElementById("mylink").onmouseover = function() { alert("Hover!"); }
document.getElementById("mylink").onmouseout  = function() { alert("Out!"); }

in jQuery:

$('#mylink').mouseover(function() {
  alert("Hover!");
});
like image 28
Pekka Avatar answered Nov 09 '22 15:11

Pekka