javascript – JS- und CSS-Problem: Nachdem die Maus über ein Symbol auf der Karte bewegt wurde, wie soll der angezeigte Inhalt relativ zum Symbol zentriert werden?

Question

Wie im Bild unten gezeigt, ist der rechte Effekt der, den ich benötige. Das heißt, wenn die Maus über das rote Standortsymbol auf der Karte bewegt wird, werden die angezeigten Fotos und Inhalte relativ zum Standortsymbol unten zentriert. Die linke Seite ist der Effekt, den ich gemacht habe. Bitte helfen Sie mir, einen Blick darauf zu werfen.

Unten ist mein 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

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

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

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

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

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

二、JS 动态调整

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

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