jquery-highlight-element-under-mouse-cursor

by manoj

HTML

<p> test <input></p>
<div>more test <div> inner test</div> <span> test</span>

JavaScript

var $div = $('<div id="highlighter">').css({
    'background-color': 'rgba(255,0,0,.5)',
    'position': 'absolute',
    'z-index': '65535'
}).hide().prependTo('body');

var $highlit;

$('*').live('mousemove', function(event) {
    if (this.nodeName === 'HTML' || this.nodeName === 'BODY')
    {
        $div.hide();
        return false;
    }
    var $this = this.id === 'highligher' ? $highlit : $(this),
        
        x = event.pageX,
        y = event.pageY,
        
        width = $this.width(),
        height = $this.height(),
        offset = $this.offset(),
        
        minX = offset.left,
        minY = offset.top,
        maxX = minX + width,
        maxY = minY + height;
    
    if (this.id === 'highlighter')
    {
        if (minX <= x && x <= maxX
            && minY <= y && y <= maxY)
        {
            // nada
        }
        else
        {
            $div.hide();
        }
    }
    else
    {
        $highlit = $this;
        $div.offset(offset).width($this.width()).height($this.height()).show();
    }
    return false;
});