CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user985358
user985358

Reputation:

Ignore a label over clickable areas for mouse events

In this simplistic JSFiddle sample, you can see a div with text over a img. The cursor can take one of three behaviors depending on where it hovers: pointer over img, text selection over div's content and default when outside both:

<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png">
<div>Stack Overflow</div>

 

img {position: absolute; clip: rect(0px, 238px, 61px, 0px); cursor: pointer;}
div {position: absolute; margin: 50px; border: 3px solid gray;}

How can you completely ignore div's interference on cursor?

And by that I mean when you hover the cursor over div and img intersection you get only img's behavior, and when over div and outside intersection you get only outside's behavior.

The solution would be useful for labeling on maps.

Upvotes: 0

Views: 397

Answers (1)

Elliot Bonneville
Elliot Bonneville

Reputation: 53291

One solution is to set the CSS property pointer-events to none on the div in question. You can find the pointer events specification here--the support isn't great (IE9+, mainly) but sounds like exactly what you need.

Upvotes: 1

Related Questions