javascript - 带有叠加 div 的图像映射 : Mouseover disappears on div

Question

谁能告诉我如何解决这个问题？

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

看看下面留下的部分……带有旗帜。在区域上鼠标悬停是可见的.. 但它在标志上消失了 - 这就是我想要删除的东西。它应该保持可见。

但请记住，这是一个非常简单的示例。实际上我有很多区域和标志。 ;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

您也可以使用 css 属性 pointer-events: none;。

#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;
}

这是演示 http://jsfiddle.net/9Br6h/2/ .