mouseenter 和 mouseleave 的 jquery 地图问题答案

【问题标题】：jquery map problems with mouseenter and mouseleavemouseenter 和 mouseleave 的 jquery 地图问题
【发布时间】：2017-01-18 10:35:02
【问题描述】：

我尝试使用一种“工具提示”来实现图像映射。

$(document).ready( function () {
	$('#green').on('mouseenter',function(){
      
       toolTip =  $('#toolTip1').html();
       $('body').append('<div class="toolTip">' + toolTip + '</div>');
    });
    $('#green').on('mouseleave',function(){
       // $('.toolTip').remove();
    });
$('#orange').on('mouseenter',function(){
       toolTip =  $('#toolTip2').html();
       $('body').append('<div class="toolTip">' + toolTip + '</div>');
    });
    $('#orange').on('mouseleave',function(){
       // $('.toolTip').remove();
    });
});

$(document).mousemove(function(event){
   $(".toolTip").attr('style', 'left: ' + (event.pageX - 10) + "px; top: " + (event.pageY - 25) + "px");
});

.toolTip {
    background-color: #ffffff;
    border: 1px solid #ff0000;
    padding: 5px;
    width: 200px;
    position: absolute;
    z-index: 10000;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"  /> 
    <title>Map</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="map.js"></script>
    <link href="map.css" rel="stylesheet" type="text/css" />
</head>
<body>

<img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADwCAIAAAA1lM7CAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QESCggK8ycy4wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACk0lEQVR42u3WMU4CQRiG4X/cBRIMB7CyMVZ6CCqO4BHsPINnsNIj2NBb6SUsKCkMByBLwg4Bj7BaIOvkeeqpvsyb/KlZzAM4nTMTgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIoUj1z5+OB6Pp29NkMCpsgnXevs8eNnnrN9D3CCNVH1+fw+G4sAnadhOp8hVwjoIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIQYSACEGEgAhBhIAIQYSACEGEwB+qf/E2RexyW+XSNtjlSH4CJ5OaxdwK4BwFEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiKEMtUm6JFmHaulGbrtD3F9K0KOYLWM1xczdMs5Hp+do4AIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQITQN7UJeuTiMu7uzdBtfxAhx3E+iasbMzhHARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARHCf/YNV6AqwqZ8gfAAAAAASUVORK5CYII="    width="300" height="240" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="16,21,87,99" id="green" target="green"  nohref="nohref" />
<area shape="rect" coords="129,117,234,214" id="orange" target="orange"  nohref="nohref" />
</map>
<div id="toolTip1" style="display: none;">This is Tooltip 1 (green)</div>
<div id="toolTip2" style="display: none;">This is Tooltip 2 (orange)</div>
</body>
</html>

工具提示按预期显示，但在离开该区域时不会消失（当然，它已被注释掉）。但是当我不评论它时，没有任何东西显示为工具提示）

你知道问题是什么吗？我尝试不使用任何插件。

非常感谢！沃尔克

【问题讨论】：

标签： jquery image dictionary hover

【解决方案1】：

您遇到的问题是，当 .toolTip 被删除时，最后一个 mousemove 事件无法正常工作。

这将解决您的问题：

$(document).ready(function() {
  $('#green, #orange').hover(function(e) {
    $(".toolTip").toggle()

    if (this.id == "green") {
      $(".toolTip").text('This is Tooltip 1 (green)')
    } else {
      $(".toolTip").text('This is Tooltip 2 (orange)')
    }
  });

  $(document).on('mousemove', function(e) {
    $(".toolTip").css({
      'left': e.pageX - 10 + 'px',
      'top': e.pageY - 35 + 'px'
    })
  })
})

.toolTip {
  background-color: #ffffff;
  border: 1px solid #ff0000;
  padding: 5px;
  width: 200px;
  position: absolute;
  z-index: 10000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADwCAIAAAA1lM7CAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QESCggK8ycy4wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACk0lEQVR42u3WMU4CQRiG4X/cBRIMB7CyMVZ6CCqO4BHsPINnsNIj2NBb6SUsKCkMByBLwg4Bj7BaIOvkeeqpvsyb/KlZzAM4nTMTgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIoUj1z5+OB6Pp29NkMCpsgnXevs8eNnnrN9D3CCNVH1+fw+G4sAnadhOp8hVwjoIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIQYSACEGEgAhBhIAIQYSACEGEwB+qf/E2RexyW+XSNtjlSH4CJ5OaxdwK4BwFEQIiBBECIgQRAiIEEQIiBBECIgQRAiIEEQIiBBECIgQRAiKEMtUm6JFmHaulGbrtD3F9K0KOYLWM1xczdMs5Hp+do4AIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhIAIQYSACEGEgAhBhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQIQgQkCEIEJAhCBCQITQN7UJeuTiMu7uzdBtfxAhx3E+iasbMzhHARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARGCCAERgggBEYIIARHCf/YNV6AqwqZ8gfAAAAAASUVORK5CYII="
width="300" height="240" border="0" usemap="#map" />
<map name="map">
  <area shape="rect" coords="16,21,87,99" id="green" target="green" nohref="nohref" />
  <area shape="rect" coords="129,117,234,214" id="orange" target="orange" nohref="nohref" />
</map>
<div class="toolTip tt" style="display: none;"></div>

这不是最丰富的解决方案，但你会明白最后一个 $(document).mousemove() 的问题

【讨论】：

好多了:)当我在方块上移动时，工具提示会闪烁，有时会消失:(但我会寻找解决方案...
问题是当你的鼠标进入.toolTip时。那是它闪烁的时候，因为你要离开#green
嗨，我不知道你是否解决了你的问题，但请查看我编辑的代码。它现在运行正常。希望对您有所帮助。