Emulating Webkit's Element Inspector

Question

I'm trying to let a user select an element on a page using their mouse, like you see in chrome's dev tools. (yes, I know it's open source and already js)

The problem arises when trying to detect when the mouse moves from a parent element to a child element. As you can see right now I'm getting around that by resetting the element_hover div, but this creates a terrible flashing effect.

Any idea how I can emulate webkit's inspector with a bare minimum amount of code?

http://jsfiddle.net/Atked/

Answer 1

Don't hide the red div while the mouse is over the red div. Temporarily hide the red div while you work out which element to highlight, you can work out which element to highlight using getElementFromPoint.

Answer 2

You could try something like this: (not perfect, but better than what you had, and a start at least) http://jsfiddle.net/Atked/1/