Prevent an element from being the target in a document mouseover

Question

I'm building an firebug-like inspection tool for my page. When the mouse enters an element, the element should be highlighted. Now I'm creating an element which I position absolute on top of the target element, this however means the next mousemove event (which is bound to the document) will fire with the actual "highlight element" as the target.

Is there a way to prevent the "highlight element" from being the target element in the mousemove event? The element already has a transparant background.

Answer 1

Just do an if-statement: If the highlight element is the target, then the target should be the highlighted element.

Answer 2

As far as I know, you can not capture events beneath an element (even if it has 0% opacity). Though IE did once have a bug with this.

You could try adding via CSS

.hover {
    outline: 1px solid red;
}

I'm not sure how good that works outside of Firefox though.