css - 定位弹出窗口以留在 <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关于它是如何完成的。

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