Question

我尝试用一种＆＃34;工具提示＆＃34;来实现图像映射。

＆＃13;

$(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");
});

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

有什么问题是什么？我试着不使用插件。

非常感谢！沃尔克

Answer 1

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

这将解决您的问题：

＆＃13;

$(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'
    })
  })
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

这不是最丰富的解决方案，但你会理解最后一个$（文件）的问题.mousemove（）

使用mouseenter和mouseleave查询jquery map

1 个答案: