Question

我有以下代码;

var posLeft = 170;
var posDown = e.pageY;

    $(this).next().css({'top':posDown, 'left':posLeft, 'position':'absolute'}).toggleClass('is-hidden');
});

和HTML

<tr>
    <td><a href="#">123</a>
        <div class="pop-up is-hidden">
            <p>Type:<span>Code</span></p>
            <p>Number:<span>123</span></p>
            <p>Status:<span>Valid</span></p>
            <p>Sold In:<span>August</span></p>
            <p>Uploaded:<span>20/09/2012 10:34</span></p>
        </div>
    </td>
    <td>Code</td>
    <td>Valid</td>
    <td>Device is active</td>
</tr>

jQuery在悬停时显示.pop-up div，我遇到的问题是.pop-up的垂直位置。它正确地位于左侧，但垂直定位已经完成。我认为使用pageY将div相对于文档定位，当我希望它被定位在锚点上时。

该表格没有应用任何定位，因此我需要帮助您了解.pop-up出现在正确位置的最佳方法。

提前致谢。

Answer 1

尝试在点击的元素上使用jquery position method。

例如var posDown = $(this).position().top

这应该给你正确的位置。

编辑 - 这是一个非常类似于SubRed的小提琴，但使用position()和height属性来定位工具提示http://jsfiddle.net/FUS27/

Answer 2

您的意思是 FIDDLE 吗？

$("a.tooltip").mouseenter(function(e) {
    tooltip = $(this).parent().find(".is-hidden");
    tooltip
        .css("top",(e.pageY) + "px")
        .css("z-index","200002")
        .css("left",(e.pageX) + "px");

    tooltip.show();
}).mouseleave(function(e) {
    tooltip = $(this).parent().find(".is-hidden");
    tooltip.hide();
});

相对于它的父级定位工具提示

2 个答案: