我有一张 map ,它用坐标进行映射以显示如下工具提示:
var areas = document.getElementsByTagName('area');
var tooltip = document.getElementById('tooltip');
for (var i = 0; i < areas.length; i++) {
areas[i].addEventListener("mouseenter", updateTooltip);
areas[i].addEventListener("mouseleave", removeTooltip)
}
function updateTooltip() {
tooltip.style.display = "block"
tooltip.innerHTML = this.getAttribute('data-text');
var coordinates = this.getAttribute('coords').split(',')
tooltip.style.left = coordinates[0] + 'px';
tooltip.style.top = coordinates[coordinates.length - 1] + 'px';
}
function removeTooltip() {
tooltip.style.display = "none"
}
.tooltip {
position: absolute;
z-index: 9999;
border: 1px solid black;
min-width: 100px;
max-width: 150px;
background: white;
}
area {
position: relative;
}
.parent {
position: relative;
}
<div class="parent">
<img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map">
<map name="image-map">
<area target="" data-text="USA Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="USA" title="USA" href="" coords="110,140,182,141,186,148,198,146,198,140,214,139,224,134,234,143,221,150,213,154,205,156,205,170,199,174,194,181,193,188,162,182,158,171,149,173,145,179,141,170,124,168,121,173,112,168,105,158" shape="poly">
<area target="" data-text="Mexico Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="MEXICO" title="MEXICO" href="" coords="124,172,137,171,141,178,152,173,160,181,162,204,179,199,179,211,157,212,173,216,146,204,136,196,125,188" shape="poly">
<area target="" data-text="Japan Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly">
<area target="" data-text="Germany Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly">
<div class="tooltip" id="tooltip"></div>
</map>
</div>
正如您在鼠标悬停时看到的那样,它显示了一些工具提示,问题出在美国和墨西哥的工具提示 flik 上很多,有人知道如何解决吗?问候
最佳答案
这是因为一旦工具提示弹出,鼠标就会位于工具提示上方,从而触发您注册的 mouseleave
事件。您可以通过在工具提示上添加 css 属性 pointer-events:none
来防止它触发事件。
我修改了下面的示例!
var areas = document.getElementsByTagName('area');
var tooltip = document.getElementById('tooltip');
for (var i = 0; i < areas.length; i++) {
areas[i].addEventListener("mouseenter", updateTooltip);
areas[i].addEventListener("mouseleave", removeTooltip)
}
function updateTooltip() {
tooltip.style.display = "block"
tooltip.innerHTML = this.getAttribute('data-text');
var coordinates = this.getAttribute('coords').split(',')
tooltip.style.left = coordinates[0] + 'px';
tooltip.style.top = coordinates[coordinates.length - 1] + 'px';
}
function removeTooltip() {
tooltip.style.display = "none"
}
.tooltip {
position: absolute;
z-index: 9999;
border: 1px solid black;
min-width: 100px;
max-width: 150px;
background: white;
/* ADDED */
pointer-events:none;
}
area {
position: relative;
}
.parent {
position: relative;
}
<div class="parent">
<img id="mapImage" src="https://i.imgur.com/Y7HuHDQ.png" usemap="#image-map">
<map name="image-map">
<area target="" data-text="USA Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="USA" title="USA" href="" coords="110,140,182,141,186,148,198,146,198,140,214,139,224,134,234,143,221,150,213,154,205,156,205,170,199,174,194,181,193,188,162,182,158,171,149,173,145,179,141,170,124,168,121,173,112,168,105,158" shape="poly">
<area target="" data-text="Mexico Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="MEXICO" title="MEXICO" href="" coords="124,172,137,171,141,178,152,173,160,181,162,204,179,199,179,211,157,212,173,216,146,204,136,196,125,188" shape="poly">
<area target="" data-text="Japan Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="JAPAN" title="JAPAN" href="" coords="705,106,716,106,721,146,687,184,667,175" shape="poly">
<area target="" data-text="Germany Shops: Manchester,TN - Num: 6621418372 WIXOM ,MI - Num:662728173" alt="GERMANY" title="GERMANY" href="" coords="418,111,436,108,433,124,418,124" shape="poly">
<div class="tooltip" id="tooltip"></div>
</map>
</div>
关于javascript - 鼠标悬停事件中的工具提示轻拂,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50596821/