0

私は次のコードを持っています。

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を配置したいときに、ドキュメントに対してdivを配置することになります。

テーブルにはポジショニングが適用されていないため、を.pop-up正しい場所に表示するための最良の方法についてサポートが必要です。

前もって感謝します。

4

2 に答える 2

1

クリックされている要素でjquerypositionメソッドを使用してみてください。

例えばvar posDown = $(this).position().top

それはあなたに正しい位置を与えるはずです。

編集-これはSubRedと非常によく似たフィドルですがposition()、ツールチップを配置するためにとheightプロパティを使用していますhttp://jsfiddle.net/FUS27/

于 2012-12-07T09:32:06.830 に答える
1

このフィドルのような意味ですか？

$("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();
});​
于 2012-12-07T09:51:08.157 に答える