jquery report what element is being hovered on

Question

Im trying to build a mini inspector tool that simply reports the element being hovered over, its ID and any classes it has.

I built a demo page which has 4 nested elements:
html > body > outerContainer > innerContainer

I have managed to get it working to a fashion, it reports the information correctly when going from the outer elements to the inner elements, but when going in reverse, the reported element is the previous one.

To see it in action - http://jsfiddle.net/sygad/kmJ5s/

<head>

    <meta charset="utf-8">

    <title>Element Hover</title>

    <style>

        html                {margin:0; padding:40px 20px 0; background:#333; font:0.9em/1.1em "Arial", sans-serif}
        body                {margin:0; padding:0 0 10px; background:#555}

        #outerContainer     {margin:20px; padding:0; background:#777; width:240px; height:260px;}
        #innerContainer     {margin:20px; padding:0; background:#999; width:200px; height:200px;}

        p#info              {position:absolute; top:0; left:0}
        p                   {margin:0; padding:0; color:white}

    </style>

</head>

<body>

    <p id="info">Current element: <span></span></p>

    <p>Body</p>

    <div id="outerContainer">
        <p>Outer</p>

        <div id="innerContainer">
            <p>Inner</p>
        </div>

    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

    <script>

        //Initialise
        var nodeName = '';
        var ids = '';
        var classes = '';

        $('*').hover(function(e)
        {
            //Clear
            nodeName = '';
            ids = '';
            classes = '';

            nodeName = $(this).context.nodeName.toLowerCase();

            if ($(this).attr('id') != undefined)
            {
                ids = ' #' + $(this).attr('id');
            }

            if ($(this).attr('class') != undefined)
            {
                classes = ' .' + $(this).attr('class');
            }

            $('p#info span').text(nodeName+ids+classes)
        })
    </script>

</body>

It just seems like this can be done a lot easier : http://jsfiddle.net/kmJ5s/10/ — adeneo, Nov 02 '12 at 21:06

score 3 · Answer 1 · edited Nov 02 '12 at 21:02

3

Try using $(e.currentTarget) instead of $(this)

edited Nov 02 '12 at 21:02

Selvakumar Arumugam

79,297
15
120
134

answered Nov 02 '12 at 20:57

James P. Wright

8,991
23
79
142

Seems to have the exact same problem on Webkit and Firefox. http://jsfiddle.net/kmJ5s/9/ – Fabrício Matté Nov 02 '12 at 21:07

score 2 · Accepted Answer · answered Nov 02 '12 at 21:08

You need to take care of below items,

You should really implement this onmousemove because when you move inside child elements from a parent and leave a child element, it won't update for parent as you never enter/leave the parent element.
You should use e.target instead of this
Clear off global vars as it might carry over to next element.

DEMO: http://jsfiddle.net/kmJ5s/8/

var nodeName = '';
var ids = '';
var classes = '';

$('*').mousemove(function(e) {
    nodeName = '';
    ids = '';
    classes = '';
    var _this = e.target;
    nodeName = _this.nodeName.toLowerCase();

    if (_this.id) {
        ids = ' #' + _this.id;
    }

    if (_this.className) {
        classes = ' .' + _this.className;
    }

    $('p#info span').text(nodeName + ids + classes)
});

Fantastic, thankyou very much. Why does "mousemove" and "e.target" work more effectively than "hover" and "this" though? — sygad1, Nov 03 '12 at 08:54

jquery report what element is being hovered on

2 Answers2