[英]jQuery /CSS - get position of relative element, position tooltip accordingly
我有一个 map 显示不同的位置,当将其悬停在 cursor 旁边会显示一个工具提示,显示有关该位置的信息。
map 是主 ul id="map" 的背景图,每个位置是一个 li。 该位置由 css 使用顶部和左侧定位。
#map 是相对定位的,工具提示是绝对定位的。
我的标记如下:
<ul id="map">
<li><a href="#" class="harewood tip_trigger"><img src="images/marker.gif" width="12" height="12" alt="" /> <span class="tip"><img src="images/thumb.jpg" width="143" height="107" alt="" />Title<br />Click marker for details</span></a></li>
我可以使用 jQuery 显示和隐藏 .tip 跨度没问题,但我想获得 parent.tip_trigger 的 position,并将工具提示从 Z1791A97A8403730EE0760489A2ApxEBZ 偏移,例如,1 说,
我将如何修改下面的 jquery 代码?
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
var pos = $("#map").position();
var width = $(".tip").width();
tip = $(this).find('.tip');
tip.show(); //Show tooltip
tip.css({"left": (pos.left + width) + "px","top":pos.top + "px" });
}, function() {
tip.hide(); //Hide tooltip
});
});
我已经搞砸了一段时间,已经尝试过 jquery 文档,但无法弄清楚。
algiecas 是对的,我通常会在each
步骤中添加一个额外的步骤
像这样:
$(document).ready(function() {
//Tooltips
$(".tip_trigger").each(function () {
$(this).hover(function(){
// assuming you give the image the class marker
var pos = $(this).find('marker').position();
tip = $(this).find('.tip');
var width = tip.width();
tip.show(); //Show tooltip
tip.css({"left": (pos.left + width) + "px","top":pos.top + "px" });
}, function() {
tip.hide(); //Hide tooltip
});
});
});
您可能应该使用 .tip_trigger 的.tip_trigger
,而不是整个#map
var pos = $(this).position();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.