Home/ Questions/Q 8827465
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T07:22:40+00:00

Im trying to build a mini inspector tool that simply reports the element being

  • 0

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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)
});
    • 0