CODEWITHSUNDEEP
jqueryhovernodename
sygad1
sygad1

Reputation: 1482

jquery report what element is being hovered on

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>

Upvotes: 1

Views: 127

Answers (2)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

You need to take care of below items,

  1. 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.
  2. You should use e.target instead of this
  3. 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)
});

Upvotes: 2

James P. Wright
James P. Wright

Reputation: 9131

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

Upvotes: 3

Related Questions