jQuery: Highlight element under mouse cursor? [duplicate]

Answer 1

Can I suggest an alternative approach?

How about simply assigning a background-color to all child elements of the page, and then, on hover(), adjust the background-color of that element to increase its contrast?

$('html').children().css('background-color','rgba(0,0,0,0.2)');
$('body').children().hover(
    function(){
        $(this).css('background-color','#fff');
    },
    function(){
        $(this).css('background-color','rgba(0,0,0,0.2)');
    });

JS Fiddle demo.

Answer 2

All these answers are too complicated... Simple solution:

Javascript:

prevElement = null;
document.addEventListener('mousemove',
    function(e){
        var elem = e.target || e.srcElement;
        if (prevElement!= null) {prevElement.classList.remove("mouseOn");}
        elem.classList.add("mouseOn");
        prevElement = elem;
    },true);

Css:

.mouseOn{
  background-color: #bcd5eb !important;
  outline: 2px solid #5166bb !important;
}

Answer 3

► This is a bit less fidgety, but it can't detect moving from a parent element to one of its children without first moving the mouse completely off said parent.

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

Hopefully that helps get the ball rolling. You could probably tweak what I've written to use document.elementFromPoint(x, y) to check whether or not the mouse has moved into a child element of the element currently highlighted. I'm not awake enough to figure this out right now.

Alternately, if outlining is as good as highlighting to you, you could try the approach I mentioned in my comment to your original question. Draw 4 divs around the currently hovered element* - that's one div for each edge of the outline box. No more drawing elements between you and your actual content!

---

*I'd bet that document.elementFromPoint(x, y) will make getting the element under your mouse much easier here.

Answer 4

To amend David's answer so that it properly reverts the background color afterwords...

$('body *').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        $(this).data('bgcolor', $(this).css('background-color'));
        $(this).css('background-color','rgba(255,0,0,.5)');
    } else {
        $(this).css('background-color', $(this).data('bgcolor'));
    }
    return false;
});

Answer 5

The reason that the whole page goes red as soon as you mouse over is that your code is matching a mouseover event for the body element. You can stop that from happening by only selecting children of body.

$('body *').bind( //...

You'll hit performance problems on a page with a large number of elements, though since bind will attach a listener for every single matched element. Try taking a look into jQuery's event delegation api (.delegate(), http://api.jquery.com/delegate/) which allows you to listen for events propagating up to a root element and works for mouse events as well.