Getting the identifier of any tag on hover

Question

Does anyone know how I can get the identifier of any element when the mouse is over?

I want to show a div (field) above the elements (tags) that the mouse is over. I cannot change the tags to enable the mousover event. I want a global callback or something like that to have a tag id that is under the mouse pointer.

Thanks!

Answer 1

You want the target events to be onmouseover , so you can access the properties of the element:

 <script> document.onmouseover = function(e) { console.log(e.target.id); } </script> 

See Cross-browser event properties for a goal (the following example from the aforementioned website):

 function doSomething(e) { var targ; if (!e) var e = window.event; if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; if (targ.nodeType == 3) // defeat Safari bug targ = targ.parentNode; } 

To bring them together:

 document.onmouseover = function(e) { var targ; if (!e) var e = window.event; if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; if (targ.nodeType == 3) // defeat Safari bug targ = targ.parentNode; console.log(targ.id); } 

Answer 2

It may be useful.

Answer 3

It may not be what you are looking for. but if you use web developer tools for firefox, you can select "Information → Show ID and Class Data". This will display the identifier and class information for each element on the page. Also, using CSS → View Style Information will allow you to hang elements and have a hierarchy of classes and identifiers that is displayed individually when you hover over them. I propose this solution only because I assume that you do not want the functionality to be available to the user, but rather as a tool for debugging the website.