Cancel a mouse event when an item is overlapped

Hope this JSFiddle illustrates the problem better than my words:

http://jsfiddle.net/pmwRc/6/

I show the absolutely positioned H4 as a shortcut above the image card when the card freezes. However, when the mouse moves over H4, the image map starts the mouse, causing H4 to hide again.

How can I prevent this? I want the label to be visible when the mouse is above the image map, regardless of whether it is also above the label.

+3
source share
3 answers

You can โ€œspoofโ€ using a transparent image / layer (using your map) that is placed on top of your image.

http://jsfiddle.net/GRPQa/7/

.

+1
+1
function doSomething(e) {
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg && reltg.nodeName != 'BODY')
        reltg= reltg.parentNode
    if (reltg== tg) return;
    // Mouseout took place when mouse actually left layer
    // Handle event
}

See http://www.quirksmode.org/js/events_mouse.html

0
source

All Articles