定位弹出窗口以留在 <map><area>

Question

我一直在尝试使用 href="" 的区域映射的网站设计，并且每个悬停都有弹出窗口我对我正在做的事情没有真正的问题，但有什么办法可以将我的弹出窗口保留在不同屏幕宽度的特定区域，而不必为每个屏幕尺寸调整 @media()。

/*HTML代码*/

<!-- Content -->

<!-- Landing Image -->
<div class="gridContainer clearfix">
<div class="col-lg-9">
<div class="fluid"><img src="images/pacificsharedservicesimage.png" alt="" usemap="#landingpagebuttons" class="img-responsive col-lg-offset-2 landingpageimage"></div>
</div>

<map name="landingpagebuttons">
<area id="recruitment" shape="circle" coords="276,99,61" href="home.html" data-toggle="popover" data-placement="left" data-container="body" title="popover test" data-content="phone:+61expamle ; email: example@example.com">
<area id="humanresources" shape="circle" coords="206,251,61" href="home.html" data-toggle="popover" data-placement="left" data-container="body" title="popover test2" data-content="phone:+61expamle ; email: example@example.com">
<area id="successionplanning" shape="circle" coords="276,406,61" href="home.html" data-toggle="popover" data-placement="left" data-container="body" title="popover test3" data-content="phone:+61expamle ; email: example@example.com">

<area id="payroll" shape="circle" coords="547,96,61" href="home.html" data-toggle="popover" data-placement="right" data-container="body" title="popover test4" data-content="phone:+61expamle ; email: example@example.com">
<area id="compensationandbenefits" shape="circle" coords="616,253,61" href="home.html" data-toggle="popover" data-placement="right" data-container="body" title="popover test5" data-content="phone:+61expamle ; email: example@example.com">
<area id="educationandlearning" shape="circle" coords="551,405,61" href="home.html" data-toggle="popover" data-placement="right" data-container="body" title="popover test6" data-content="phone:+61expamle ; email: example@example.com">
</map>

</div>
<!-- End Landing Image -->

<div class="gridContainer clearfix"><br></div>

<!-- Widgets -->
<div class="gridContainer clearfix">
<div class="col-lg-7">
<div class="fluid"><img id="socialmediaicons" class="img-responsive col-lg-offset-6" usemap="#widgets" src="images/socialmediaicons.png" alt=""></div>
</div>
</div>

<map name="widgets">
<area id="facebook" shape="circle" coords="67,59,36" href="https://www.facebook.com/Pacific-Shared-Services-645030438932875">
<area id="instagram" shape="circle" coords="158,57,36" href="https://www.instagram.com/pacific_shared_services">
<area id="linkedin" shape="circle" coords="251,58,36" href="https://www.linkedin.com/company/pacific-shared-services">
<area id="pinterest" shape="circle" coords="344,58,36" href="https://au.pinterest.com/PacificSS">
<area id="twitter" shape="circle" coords="436,58,36" href="https://twitter.com/PACIFIC_SS">
</map>
<!-- End Widgets -->

<br>

<!-- End Content -->

/*结束HTML代码*/

/* CSS代码*/

/* Home */
img.map, map area { outline: none; }
map { top:0; left:0; }

/* Popover Position */
#recruitment { border:1px solid #000; width: 20px; height:20px; position:absolute; top:525px; left:680px; }
#humanresources { border:1px solid #000; width: 20px; height:20px; position:absolute; top:680px; left:613px; }
#successionplanning { border:1px solid #000; width: 20px; height:20px; position:absolute; top:840px; left:680px; }

#payroll { border:1px solid #000; width: 20px; height:20px; position:absolute; top:525px; left:1128px; }
#compensationandbenefits { border:1px solid #000; width: 20px; height:20px; position:absolute; top:680px; left:1195px; }
#educationandlearning { border:1px solid #000; width: 20px; height:20px; position:absolute; top:840px; left:1128px; }
/* End Popover Position */

.landingpageimage { width:800px; }
/* End Home */

/*结束CSS代码*/

Answer 1

我建议让你的 POPOVERS 在鼠标点击时靠近光标。

查看此 PEN 了解它是如何完成的。

通过这种方法，您的风格将在每个媒体中进行最少的编辑。

定位弹出窗口以留在 <map><area>

positioning popover to stay with <map><area>

css

position

popover