jquery - 将鼠标悬停在区域上时图像映射中的错误

标签 jquery html css

我有一个交互式的世界地图，你可以在上面悬停在不同的大陆上，然后那个特定的大陆就会有悬停效果，大陆的名字就会放在这个区域上。我使用图像 map 完成此操作，并在将鼠标悬停在某个区域上时通过 jQuery 更改图像。像这样:

$(document).ready(function() {
  $('.map-area').mouseover(function(e) {
    var areaId = $(e.target).attr('id');
    $('#worldMap').attr('src', 'http://i.imgur.com/' + areaId + '.png');
    $('[id^=text_]').removeClass('open');
    $('#text_' + areaId).addClass('open');
  });

  $('.map-area').mouseout(function() {
    $('#worldMap').attr('src', 'http://i.imgur.com/5H1hiBU.png');
    $('[id^=text_]').removeClass('open');
  });
});
.continent-text {
  position: absolute;
  color: #fff;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1rem;
}

.continent-text.eu {
    display: none;
    left: 28%;
    top: 35%;
}

.continent-text.eu.open {
      display: block;
}

.continent-text.as {
    display: none;
    left: 40%;
    top: 32%;
}

.continent-text.as.open {
      display: block;
}

.continent-text.na {
    display: none;
    left: 8%;
    top: 37%;
}

.continent-text.na.open {
      display: block;
}

.continent-text.sa {
    display: none;
    left: 15%;
    top: 77%;
}
.continent-text.sa.open {
      display: block;
}

.continent-text.af {
    display: none;
    left: 28%;
    top: 60%;
}

.continent-text.af.open {
      display: block;
}

.continent-text.oc {
    display: none;
    left: 46%;
    top: 89%;
}

.continent-text.oc.open {
      display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.imgur.com/5H1hiBU.png" usemap="#image-map" id="worldMap">

<map name="image-map" class="continent-picker">
  <area class="map-area" id="OG7CyJf" target="" alt="Europe" title="Europe" href="#" coords="624,190,632,177,615,172,609,162,601,161,608,155,595,142,602,130,597,85,607,78,558,70,508,96,455,212,474,238,501,233,546,222,584,239,588,219" shape="poly">
  <area class="map-area" id="epfSt9E" target="" alt="Africa" title="Africa" href="#" coords="593,509,666,473,686,378,664,318,639,321,620,284,608,259,576,241,540,226,471,239,430,339,515,497" shape="poly">
  <area class="map-area" id="jx6tE7q" target="" alt="North America" title="North America" href="#" coords="272,347,287,318,310,313,478,104,479,0,1,0,0,159,57,170,97,164,133,236,189,318" shape="poly">
  <area class="map-area" id="XFfneee" target="" alt="South America" title="South America" href="#" coords="272,345,286,317,310,314,377,349,411,386,386,466,413,572,268,573,285,436,254,374" shape="poly">
  <area class="map-area" id="y4dLClt" target="" alt="Oceania" title="Oceania" href="#" coords="926,393,926,370,970,364,1046,480,1030,557,939,542,898,501,851,501,832,444,891,401" shape="poly">
  <area class="map-area" id="ZUqSyEM" target="" alt="Asia" title="Asia" href="#" coords="609,77,633,7,838,8,1074,74,1074,130,954,318,926,370,925,393,888,401,844,416,709,371,664,318,641,321,608,260,588,227,586,222,625,189,631,177,614,171,608,161,601,160,607,155,594,141,601,130,597,84" shape="poly">
</map>
<div class="continent-text eu open" id="text_OG7CyJf">Europe</div>
<div class="continent-text as" id="text_ZUqSyEM">Asia</div>
<div class="continent-text na" id="text_jx6tE7q">North America</div>
<div class="continent-text sa" id="text_XFfneee">South America</div>
<div class="continent-text oc" id="text_y4dLClt">Oceania</div>
<div class="continent-text af" id="text_epfSt9E">Africa</div>

有关文本的更精确位置，请参阅:https://codepen.io/kerowan/pen/bWEVod

问题:当您将鼠标悬停在某个区域的文本上时，该区域开始闪烁。我猜这来自 jQuery 中的 mouseover 和 mouseout 部分。只要我将鼠标悬停在文本上，jQuery 就会将其视为来自 .map-area 的 mouseout。我不知道如何解决这个问题，非常感谢向正确的方向推进!

最佳答案

您可以在文本上使用 pointer-events: none;。

$(document).ready(function() {
  $('.map-area').mouseover(function(e) {
    var areaId = $(e.target).attr('id');
    $('#worldMap').attr('src', 'http://i.imgur.com/' + areaId + '.png');
    $('[id^=text_]').removeClass('open');
    $('#text_' + areaId).addClass('open');
  });

  $('.map-area').mouseout(function() {
    $('#worldMap').attr('src', 'http://i.imgur.com/5H1hiBU.png');
    $('[id^=text_]').removeClass('open');
  });
});
.continent-text {
  position: absolute;
  pointer-events: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1rem;
}

.continent-text.eu {
    display: none;
    left: 28%;
    top: 35%;
}

.continent-text.eu.open {
      display: block;
}

.continent-text.as {
    display: none;
    left: 40%;
    top: 32%;
}

.continent-text.as.open {
      display: block;
}

.continent-text.na {
    display: none;
    left: 8%;
    top: 37%;
}

.continent-text.na.open {
      display: block;
}

.continent-text.sa {
    display: none;
    left: 15%;
    top: 77%;
}
.continent-text.sa.open {
      display: block;
}

.continent-text.af {
    display: none;
    left: 28%;
    top: 60%;
}

.continent-text.af.open {
      display: block;
}

.continent-text.oc {
    display: none;
    left: 46%;
    top: 89%;
}

.continent-text.oc.open {
      display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.imgur.com/5H1hiBU.png" usemap="#image-map" id="worldMap">

<map name="image-map" class="continent-picker">
  <area class="map-area" id="OG7CyJf" target="" alt="Europe" title="Europe" href="#" coords="624,190,632,177,615,172,609,162,601,161,608,155,595,142,602,130,597,85,607,78,558,70,508,96,455,212,474,238,501,233,546,222,584,239,588,219" shape="poly">
  <area class="map-area" id="epfSt9E" target="" alt="Africa" title="Africa" href="#" coords="593,509,666,473,686,378,664,318,639,321,620,284,608,259,576,241,540,226,471,239,430,339,515,497" shape="poly">
  <area class="map-area" id="jx6tE7q" target="" alt="North America" title="North America" href="#" coords="272,347,287,318,310,313,478,104,479,0,1,0,0,159,57,170,97,164,133,236,189,318" shape="poly">
  <area class="map-area" id="XFfneee" target="" alt="South America" title="South America" href="#" coords="272,345,286,317,310,314,377,349,411,386,386,466,413,572,268,573,285,436,254,374" shape="poly">
  <area class="map-area" id="y4dLClt" target="" alt="Oceania" title="Oceania" href="#" coords="926,393,926,370,970,364,1046,480,1030,557,939,542,898,501,851,501,832,444,891,401" shape="poly">
  <area class="map-area" id="ZUqSyEM" target="" alt="Asia" title="Asia" href="#" coords="609,77,633,7,838,8,1074,74,1074,130,954,318,926,370,925,393,888,401,844,416,709,371,664,318,641,321,608,260,588,227,586,222,625,189,631,177,614,171,608,161,601,160,607,155,594,141,601,130,597,84" shape="poly">
</map>
<div class="continent-text eu open" id="text_OG7CyJf">Europe</div>
<div class="continent-text as" id="text_ZUqSyEM">Asia</div>
<div class="continent-text na" id="text_jx6tE7q">North America</div>
<div class="continent-text sa" id="text_XFfneee">South America</div>
<div class="continent-text oc" id="text_y4dLClt">Oceania</div>
<div class="continent-text af" id="text_epfSt9E">Africa</div>

关于jquery - 将鼠标悬停在区域上时图像映射中的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43489993/

上一篇：html - 我的 Bootstrap div 内的 DIv 不会右对齐(但文本会)

下一篇：javascript - 将鼠标悬停在另一个元素上时显示一个元素并进行调整

相关文章：

javascript - 防止在文本输入中插入无效字符

javascript - 在滚动上使用 javascript 更改 css 的框阴影

javascript - 检查 Steam 配置文件 url 是否有效

javascript - "Float up left"？使div从容器顶部开始向下增长

php - 获取元标题和描述

jquery - 我可以使用 javascript 回退将 jQuery 动画转换为 CSS3 转换/转换吗？

html - 第 n 个 child ，其中 div 不是直接的 child

html - 如何默认打开 Bootstrap 的可折叠导航栏？

javascript - jQuery:如何解除绑定(bind)到文档对象的事件？

html - 强制 DIV 换行，无论父级如何

©2024 IT工具网  联系我们