jquery report what element is being hovered on

StackOverflow https://stackoverflow.com/questions/13202894

  •  29-07-2021
  •  | 
  •  

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>

Was it helpful?

Solution

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

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top