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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

给我你的怀抱 2017-06-12 09:32:10

[JavaScript讨论组]

1509

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

下面是我的HTML代码

给我你的怀抱

全部回复(1)

仅有的幸福2017-06-12 09:34:10 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 - 浮动层高度;

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>

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

二、JS 动态调整

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