Question

我正在处理工具提示的问题。

我的CSS：

#MyAuction-BidHistory {
    position:absolute;
    margin-left:346px;
    z-index:400;    
    background-color:rgba(0, 0, 0, 0.8);
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    width:217px;
}

以下是我正在使用的HTML结构：

<div id="MyAuction-BidHistory"></div>

    <table>
     <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16141, this);">1</a><td></tr>
     <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16149, this);">2</a><td></tr>
     <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16143, this);">3</a><td></tr>
     <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16144, this);">4</a><td></tr>
     <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16132, this);">5</a><td></tr>
     <tr><td><a class="my-auction-history" onmouseover="myBidHistory(16165, this);">6</a><td></tr>
    </table>

这是JavaScript / JQuery：

function myBidHistory(pListedPlatesId, pObj) {

    var d = new Date();
    var t = d.getTime();        
    $.get('/auction/includes/new-bidhistory.asp?lplateid=' + pListedPlatesId + "&xx=" + t, function(data){

        var linkOffset = $('a.my-auction-history').offset().top;

        $('#MyAuction-BidHistory').html(data).css({'display':'block', 'opacity':'0', 'top':linkOffset}).animate({opacity:1}, 200); 
        $('a.my-auction-history').mouseout(function(){$('#MyAuction-BidHistory').animate({opacity:0}, 200);}); 
    }); 
}

我遇到的问题是动态工具提示是否出现在表格中相对于链接位置的链接上方？

我已经坚持了一段时间＆amp;非常感谢我能得到的任何帮助，谢谢

Answer 1

错误在这一行：

var linkOffset = $('a.my-auction-history').offset().top;

您正在引用所有链接，当您从中获取.offset（）时，它将选择第一个链接。您必须从当前链接获得偏移量，如下所示：

var linkOffset = $(pObj).offset().top;

您还应该看看您的HTML，它无效（您没有关闭<td>）。

你也可以移出mouseout()事件，你不需要每次重新绑定它。最后，您可以使用fadeIn()和fadeOut()代替动画（它们是动画不透明度的简写函数）。

示例： http://jsfiddle.net/sD9Uy/1/

如何使用jQuery使我的动态工具提示出现在表格中的链接上方？

1 个答案: