将鼠标悬停在绝对定位的重叠元素上时，暂停悬停脚本

Question

我有一堆触发悬停工具提示的元素。 问题是工具提示与元素重叠，因此，如果将鼠标悬停在工具提示上，它将有效地从元素上移开。 然后我遇到了这样的情况，即当我在触发器上上下滑动鼠标时，工具提示会不断地淡入和淡出。 我需要暂停脚本，以便它不会触发第二部分（mouseleave），只要将鼠标悬停在工具提示上即可。

关键是这样的：工具提示不是也不可以是子元素，因为触发元素是图像映射中的区域，所以我不能简单地使用mousenter（）并将其称为wrap。 整个图像都覆盖在热点中，因此鼠标也有可能从工具提示上的区域移动到另一个区域，然后该区域应淡出第一个工具提示，然后淡入新的工具提示。

我知道这与事件冒泡有关，但是整个主题对我来说是一个深深的谜团，我希望有一个简单的解决方案。

这是一些随机代码面食：

HTML：

<img src="image.png" usemap="#Map" />
<map name="Map" id="Map">
   <area shape="poly" coords="x,y,z,w" href="#tt01" />
   <area shape="poly" coords="a,b,c,d" href="#tt02" />
</map>

<div class="tooltip tt01"></div>
<div class="tooltip tt02"></div>

JS：

$("area").hover(function () {
      var i = $(this).attr("href").split("#");
      var i = "." + i[1];

      $(".tooltip").removeClass("glue");
      $(i).fadeIn();
   }, function () {
      var i = $(this).attr("href").split("#");
      var i = "." + i[1];

      $(i).hover(function () {
         $(this).addClass("glue");
      }, function () {
         $(this).removeClass("glue");
      });

      setTimeout(function () { $(".tooltip:not(.glue)").fadeOut(); }, 200);
   });

如您所见，我尝试切换一些类（切换自定义属性后不起作用）。 这是可行的，但是一旦我从一个工具提示移至另一区域，或者如果我从工具提示移至该区域并移至新区域，就会发生有趣的事情。

Answer 1

编辑：使工具提示跟随光标并将其绝对定位：

HTML：

    <img src="image.png" usemap="#Map" />
    <map name="Map" id="Map">
       <area shape="poly" coords="x,y,z,w" alt="text for this area" />
    </map>

    <div class="tooltip"></div>

JS：

$('area').hover(function(){
    $('.tooltip').fadeIn('fast').html('Hovering over : ' + $(this).attr('alt'));
},function(){
    $('.tooltip').hide().html('');
});

$(document).bind('mousemove', function(e){
    $('.tooltip').css({
       left:  e.pageX + 20,
       top:   e.pageY
    });
});

演示： http ： //jsfiddle.net/AlienWebguy/h8AYF/

Answer 2

我与该客户交谈，该客户也想在移动设备上工作，所以我要做的是使它在点击时触发。 简单得多，因为我不必担心鼠标会移动到哪里。