mouseenterとmouseleaveのjquery mapの問題

「ツールチップ」の種類のイメージマップを実装しようとしました。mouseenterとmouseleaveのjquery mapの問題

$(document).ready(function() { 
 
\t $('#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>

ツールチップは予想通りとしてappersが、それは（もちろん、それはコメントアウトです）面積を残していたときにそれは消えません。しかし、私はそれをコメントアウトしないと、何もツールチップとして表示されません）

問題は何ですか？私はプラグインを使用しようとしなかった。

ありがとうございました！ Volker

出典

2017-01-18 Pavenstaedter

問題は、最後のmousemoveイベントが.toolTipが削除されたときに正しく機能していないことです。

これはあなたの問題を解決します：

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

それは最も豊かなソリューションではありませんが、最後の$（文書）.mousemove（に問題があることを理解するだろう）

を

出典

2017-01-18 10:59:01 Zorken17

非常に良い:) 私が四角形の上を移動すると、ツールチップが点滅し、時には消えます。（しかし、私は解決策を探します... – Pavenstaedter

問題はマウスが.toolTipに入ったとき。あなたが＃緑を残しているためにフリックするときです。 – Zorken17

こんにちは、問題のジェットを解決したかどうかは分かりませんが、編集したコードを見てください。今は正しく動作しています。それが役に立てば幸い。 – Zorken17

mouseenterとmouseleaveのjquery mapの問題

答えて

関連する問題