Here is a simple example in JSFiddle where a text is displayed over an image inside a div element. Depending on where the cursor hovers, it can exhibit three different behaviors: pointing hand over the image, allowing text selection over the content of the div, and default behavior when outside both elements:
<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 we ensure that the cursor behavior is only affected by the image and not the div?
This means that hovering over the intersection of the div and the image should trigger only the image's behavior, while hovering over the intersection of the div and outside area should trigger the behavior assigned to the outside area.
- If possible, please avoid using invisible layers or sending the div behind the image.
- If a solution requires the use of JavaScript or jQuery, feel free to implement it!
This solution could be beneficial for labeling items on maps.