javascript - JS与CSS的问题，鼠标移到地图上的某个图标后，怎么让显示出来的内容相对于图标居中显示。

Question

如下图，右边的是我需要的效果，即鼠标移上地图上红色位置图标时显示出来的照片与内容相对于下面位置图标居中显示。而左边是我做出来的效果，位移太严重了，求大神帮忙看看。

下面是我的HTML代码

<p style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 700;"><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 2044px; top: -747px; z-index: -5912030; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 1949px; top: -704px; z-index: -5911996; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: -2.37214e+07px; top: 6.85098e+06px; z-index: 0; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 1892px; top: -717px; z-index: -5912006; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 20px; height: 27px; left: 1979px; top: -703px; z-index: -5911996; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span><span class="BMap_Marker BMap_noprint" unselectable="on" "="" style="position: absolute; padding: 0px; margin: 0px; border: 0px; cursor: pointer; width: 18px; height: 18px; left: 1788px; top: -516px; z-index: 19000000; -webkit-user-select: none; display: none; background: url(&quot;http://api0.map.bdimg.com/images/blank.gif&quot;);" title=""></span></p>

Answer 1

你贴的代码没有意义，只是展示了红色图标的位置，并没有给出弹出框的结构和样式。看上去，弹出部分是 js 动态生成的并调整位置的。两个思路：

一、浮动层添加到图标 span 标签里，设置浮动层的有样式

当鼠标移动到图标上时，动态生成浮动层数据内容，并添加到 span 标签中。鼠标移出时移出动态添加的层。需要为浮动层设置样式，大致如：

span.BMap_Marker > .浮动层 {
    background-color: #fff;
    /* 基础样式略 */
    bottom: 100%;
    left: 50%;
    margin-left: -48px; /* 假设你的浮动层总宽度为 96px， */
    position: absolute;
}

需要注意 span 的 z-index 的 z-index 属性变化，因为浮动层是嵌入其中的，所以浮动层可能会被遮挡。

二、JS 动态调整

如果你的浮动层是固定尺寸的，那么你只需要用 JS 获取当前选定的图标，并读取出其相对位置，然后进行计算浮动层的位置即可：

left: 图标的left - (浮动层宽度/2);
top: 图标的top - 浮动层高度;