【发布时间】：2015-12-10 02:44:51
【问题描述】：
我想做一个弹出悬停，所以当用户悬停在图像区域地图上时，jquery 会切换弹出 div 以显示。这部分工作得很好，但我无法正确获取 div 的坐标，尤其是在将窗口调整为平板电脑或移动设备大小之后。
直播网站： https://prodiveinternational.com/international-landing-page/
Plunker： 这是一个plunkr：http://plnkr.co/edit/bcZwn0oUnPGUnwvodo32?p=preview
有没有办法让悬停保持悬停相对于图像地图，以便在屏幕调整大小期间工作？
$(document).ready(function (e) {
$('img[usemap]').rwdImageMaps();
});
function showHover(modal) {
$('#dominican').css({left: ($('#earth').offset().left + ( 182)) + 'px', top: ($('#earth').offsetTop) + 'px'});
$('#mexico').css({left: ($('#earth').offset().left + ( 84)) + 'px', top: ($('#earch').offsetTop) + 'px'});
console.log('earth width: ', $('#earth').width());
if (modal === 'dominican') {
$('#dominican').delay(250).fadeIn(250);
$('#mexico').delay(250).fadeOut(250);
} else {
$('#mexico').delay(250).fadeIn(250);
$('#dominican').delay(250).fadeOut(250);
}
}
function hideHover() {
$('#dominican').delay(250).fadeOut(250);
$('#mexico').delay(250).fadeOut(250);
}.pill {
color: #FFF !important;
width: 150px;
height: 60px;
padding: 10px 20px;
text-decoration: none !important;
font-size: 24px;
overflow: visible;
display: inline-block;
line-height: 35px;
vertical-align: bottom;
}
.footer-title {
width: 100%;
display: block;
text-align: center;
background-color: #eec364;
text-transfom: uppercase;
padding: 6px 0;
color: #fff;
margin-top: -5px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #eec364;
margin-left: 45%;
}
#dominican .footer-title {
background-color: #66b8ec;
}
#dominican .arrow-down {
border-top: 10px solid #66b8ec;
}
.left-pill {
border-bottom: 2px solid #e68c5e;
background-color: #eec364;
border-bottom-left-radius: 500px;
border-top-left-radius: 500px;
}
.left-pill:hover {
background-color: #e68c5e;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.right-pill {
background: #66b8ec;
border: 0;
border-bottom: 2px solid #4b8baf;
border-bottom-right-radius: 500px;
border-top-right-radius: 500px;
font-size: 19px;
line-height: 19px;
}
.right-pill:hover {
background: #5eabd6;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.location-popup {
width: 225px;
display: none;
position: absolute;
top: -78px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.prodiveinternational.com/wp-content/themes/prodivemex/js/jquery.rwdImageMaps.min.js"></script>
</head>
<body>
<div style="text-align: center;">
<div style="position: relative;">
<div id="mexico" class="location-popup">
<img
src="https://prodiveinternational.com/wp-content/uploads/2015/09/11391541_10153361315524938_5579018781886490858_n.jpg"
style="width:225px;"/><span class="footer-title">Mexico</span>
<div class="arrow-down"></div>
</div>
<div id="dominican" class="location-popup">
<img
src="https://prodiveinternational.com/wp-content/uploads/2015/09/11391541_10153361315524938_5579018781886490858_n.jpg"
style="width:225px;"/><span class="footer-title">Dominican Republic</span>
<div class="arrow-down"></div>
</div>
<img id="earth" style="height:auto; width: 533px;"
src="https://www.prodiveinternational.com/wp-content/themes/prodivemex/images/Scuba_Map.jpg"
title="Select Dive Location" usemap="#locations">
<map name="locations">
<area id="mexico-link" alt="Mexico" onmouseover="showHover('mexico');" onmouseout="hideHover('mexico')"
href="https://www.prodivemex.com/" shape="poly" coords="106,186,243,182,241,268,116,264"/>
<area id="dominican-link" alt="Dominican Republic" onmouseover="showHover('dominican');" onmouseout="hideHover('dominican')"
href="https://prodiveinternational.com/" shape="poly" coords="273,181,269,268,448,266,442,181"/>
</map>
</div>
<br/>
<span style="text-align: center; font-size: 32px;">
Choose Your <strong>Paradise</strong>
<br/>
<br/>
<div>
<a class="pill left-pill" href="https://www.prodivemex.com/" onmouseover="showHover('mexico');"
onmouseout="hideHover('mexico')">Mexico</a><a class="pill right-pill"
href="https://prodiveinternational.com/"
onmouseover="showHover('dominican');"
onmouseout="hideHover('dominican')"><span>Dominican<br/> Republic
</span></a>
<div style="clear:both"></div>
</div>
</span>
</div>
</body>
</html>【问题讨论】：
标签： jquery html css popup mousehover