亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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.
給我你的懷抱
給我你的懷抱 2017-06-12 09:32:10
0
1
982

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>
給我你的懷抱
給我你的懷抱

reply all(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 > .浮動(dòng)層 {
    background-color: #fff;
    /* 基礎(chǔ)樣式略 */
    bottom: 100%;
    left: 50%;
    margin-left: -48px; /* 假設(shè)你的浮動(dòng)層總寬度為 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: 圖標(biāo)的left - (浮動(dòng)層寬度/2);
top: 圖標(biāo)的top - 浮動(dòng)層高度;
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template