1

In JavaScript, is it possible to obtain a list of all elements that an element is hovering over? I'm using an element as a cursor, and I want the other elements in the page to be underlined when the cursor element is hovering over each of the other elements.

<div id="cursor">|----------|<br/>|----------|<br/>>I'm a spaceship!><br/>|----------|<br/>|----------|<br/></div>
<div id="hi">Try to select this text</div>
<p>I want to automatically highlight all elements that the cursor element hovers over.</p>
<p>Here's an element.<p>

http://jsfiddle.net/fU3Qn/

Anderson Green
  • 30,230
  • 67
  • 195
  • 328
  • I just found a similar question, but I'm not sure if it's a duplicate: http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection – Anderson Green Apr 20 '13 at 03:50

1 Answers1

1

The :hover pseudo-class applies to whatever you're cursor is over. Have a quick look at this fiddle where your mouse triggers a red background for each element hovered: http://goo.gl/zurP6

Secondly, if you are using an element as your cursor, you can instruct your mouse to pass through it by using the pointer-events: none rule. Note, support outside of SVG for this property is limited.

Other than this, the only alternative way is to use something like elementFromPoint, but this will return only a single element. I'm not sure this would even work for you since you're mouse is always obstructed by an element to begin with.

Regarding the elementFromPoint route, you could temporarily hide your custom cursor to get the next element below the mouse, and then turn your custom cursor back on, as suggested in the comments below.

Sampson
  • 265,109
  • 74
  • 539
  • 565
  • For `elementFromPoint`, you might be able to set `display` to `none` before calling it and restoring its previous value after. – icktoofay Apr 20 '13 at 04:53