javascript - JS and CSS problem, after moving the mouse to an icon on the map, how to center the displayed content relative to the icon.

Question

As shown below, the one on the right is the effect I need, that is, when the mouse is moved over the red location icon on the map, the photos and content displayed are centered relative to the location icon below. The left side is the effect I made. The displacement is too serious. Please help me take a look.

The following is my HTML code

<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

The code you posted is meaningless. It only shows the position of the red icon and does not give the structure and style of the pop-up box. It seems that the pop-up part is dynamically generated and adjusted by js. Two ideas:

1. Add the floating layer to the icon span tag and set the style of the floating layer

When the mouse moves over the icon, the floating layer data content is dynamically generated and added to the span tag. Moves out dynamically added layers when the mouse is moved out. You need to set a style for the floating layer, roughly as follows:

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

You need to pay attention to the z-index property change of span, because the floating layer is embedded in it, so the floating layer may be obscured.

2. JS dynamic adjustment

If your floating layer has a fixed size, then you only need to use JS to get the currently selected icon, read its relative position, and then calculate the position of the floating layer:

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