Question

我有一堆元素会在悬停时触发工具提示。问题是工具提示与元素重叠，因此如果我将鼠标悬停在工具提示上，它将有效地将鼠标移除。然后，当我鼠标打开和关闭触发器时，我最终会出现工具提示逐渐淡入和淡出的情况。我需要以某种方式暂停脚本，这样它就不会触发第二部分（mouseleave），只要我将鼠标悬停在工具提示上。

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

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

这是一些随机代码意大利面：

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

我与想要在移动设备上工作的客户进行了交谈，所以我所做的就是让它在点击时触发。更简单，因为我不必担心鼠标移动的位置。

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

2 个答案: