title: Using jQuery to highlight elements, can't get to inner elements
body: <p>I'm trying to create somewhat of a highlighting/selecting tool [using jQuery] in my web app that watches what elements you hover over inside an iFrame, selects the hovered-over element, and uses that element's styling to create on overlaying <code>div</code>. Think of the element selection tool in your web inspector.</p>
  
  <p>Here's a demo that selects all visible elements (except <code>html</code> and <code>body</code>). Hover over one: <a href="http://jsfiddle.net/PrAfG/3/" rel="nofollow">http://jsfiddle.net/PrAfG/3/</a></p>
  
  <p>The problem I'm having is that if you move really quickly across the frame you can get at the inner elements and highlight them, but if you move slowly or at a regular speed across the frame the first outer <code>div</code> that the cursor touches gets highlighted, and is henceforth stuck highlighting it because the overlaying <code>div</code> blocks the cursor from touch other elements in the page.</p>
  
  <p>I've considered setting <code>pointer-events</code> to <code>none</code> in the CSS of the overlaying div element, but I don't want that because I want the highlighted element to become inactive when it's highlighted (ie a link can't be clicked).</p>
  
  <p>Anyone know how I can highlight <strong>all</strong> of the elements (individually of course) in the frame? Without getting stuck on the outermost elements?</p>