Question

For example on a drag and drop scenario.. I would love to be able to use the onmouseover of the thing we are dragging to, but unfortunately, the design calls for a ghost (copy of what is being dragged) which will surround the area of the mouse pointer. So the cursor is moused over the ghost the whole time.

Answer 1

For Firefox 3.6+, Chrome and Safari, you can use pointer-events: none;

• jsfiddle.net Example

• Original Post from pixelastic.com

When one HTML element is over another one (like when positioning an
element using position:absolute), you usually can’t click through the
top element to access the bottom element.

That’s used as a common
technique to prevent the right click on images by some sites (like
Flickr). They just add an empty transparent div over their images to
prevent the lambda user from right clicking and saving the image.

Sometimes, when integrating complex designs, you need those additional
layers, but you also want the user to be able to click through them,
as if they weren’t there.

Just use the pointer-events:none css
property to allow click events to go through the element.

This is only
supported by Firefox 3.6+, Chrome and Safari for now.