Search code examples
javascriptjquerywebkitmouseoverinspector

Emulating Webkit's Element Inspector

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/

Solution

  • 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.