Imagemap with overlying div: Mouseover disappears on div

Question

Could anyone give me a hint how to solve this?

Fiddle: http://jsfiddle.net/9Br6h/

Have a look at the part left under... with the flag. On the area the mouseover is visible.. but it disappears on the flag - that is the thing I want to remove. It should stay visible.

But please keep in mind that this is a very simple example. In real I've tons of areas and flags. ;o)

jQuery(document).ready(function($) {
    // add div for showing dates
    $('body').append('<div id="mo_termin"></div>');
    // show div on mouseover
    $('area').mouseover(function(event) { 
        var left = event.pageX + 30;
            var top = event.pageY + 5;
            display = '<div class="views-field-field-body">Keine Termine</div>';
        $('#mo_termin').css({top: top,left: left}).html(display).show();
    });
    $('area').mouseout(function() {
        $('#mo_termin').html('').hide();
    });
});

Answer 1

you can use the css property pointer-events: none;as well.

#karte .flag {
      pointer-events: none; /*Added line*/
    position: absolute;
    background: url('http://static.netzwelt.de/farcade/images/capturetheflag1.gif') no-repeat;
    width: 50px;
    height: 50px;
    top: 200px;
    left: 50px;
}

Here is the Demo http://jsfiddle.net/9Br6h/2/.

Answer 2

Assuming that the flag completely covers the 'hover' area underneath it, you can modify your code so that the line that sets the mouseover event reads as follows:

// show div on mouseover
$('area, .flag').mouseover(function(event) {

Here is an example: http://jsfiddle.net/9Br6h/1/