0

有一个问题。乍一看这个HTML

<div id="map" style="background-image: url(map.png); width: 700; height: 600;">
  <div id="dot1" onMouseOver=expand(this) onMouseOut=shrink(this)></div>
  <div id="dot2" onMouseOver=expand(this) onMouseOut=shrink(this)></div>
</div>

我有下一个 JS 代码

function expand(element) {
  element.style.height = '100px';
}
function shrink(element) {
  element.style.height = '20px';
}

想法是：想象地图和上面的多个“红点”鼠标悬停在它上面，它扩展到 100x100，得到关于这个点的白色背景和文本。只有一个问题 - 如何在扩展其中一个点的同时使其他点粘在地图上？

例如，用户正在查看“顶部”位置，而当前位置下的其他所有位置都在向下移动约 100 像素（恰好是第一个扩展的数量）

它在position : relative看起来很好， 但只有在你不往里面看的时候。
绝对/固定？- 糟糕的选择。我必须计算用户屏幕大小/客户端大小并放置每个“点”
或计算 MAP 的左/上偏移量并制作每个点 map_offset_Left+myLeft

也许有一种方法可以将它们设置为依赖于 MAP div 并相互独立？

泰

4

1 回答 1

1

将地图设置为position: relative，其绝对定位的后代将相对于地图而不是窗口进行定位。

于 2012-06-13T12:53:40.237 回答