Question

对于我的页面，我使用j-query的ui-tabs来分隔一些元素。我正在使用.mouseover和.mouseout弹出一个小帮助div并希望它在鼠标指针附近对齐。

不幸的是，使用pageX / pageY定位它是行不通的，所以我手动将它移回去。应该有办法找到自己的位置吗？由于我正在使用制表符，我是否必须在某处或其他地方计算偏移量？

以下是我使用它的方式：

$(".hashelp").mouseover(function(e){
        offsety = 5;
        offsetx = 5; //pop-up slightly below and right of the mouse.
        if($(this).attr("id")=="tablist")
        {
            offsety = -200;
            offsetx = -50;
        }
        else if($(this).parent().hasClass("ui-tabs-panel"))
        {
            console.log("pagex: "+e.pageX+" pagey: "+e.pageY+" helpx: "+helpx+" helpy: "+helpy);
            offsety = -200;
            offsetx = -15;
        }
        if(firsttime){
        $(this).find(".help").eq(0).css("top",(e.pageY+offsety));
        $(this).find(".help").eq(0).css("left",(e.pageX+offsetx));
        $(this).find(".help").eq(0).show();
        }

    }).mouseout(function(){
        $(this).find(".help").eq(0).hide();
    });

这是标签的html：我使用$（“＃tabgroups”）。tabs（）来创建它。

<div id="tabgroups">
      <ul id="tablist" class="hashelp">
        <li><a href="#tab1">tab1</a></li>
        <div class="help" style="display:none;">
        please choose the right tab
        </div>
     </ul>
   <div id="tab1">
    <ul id="common" class="hashelp">
      <li><button>commonchoice1<button></li>
    <div class="help" style="display:none;">
    Some help stuff
   </div>
</div>

Answer 1

我看了div在哪里后解决了这个问题。因为它们是嵌套的，所以它们的表现很糟糕，所以我将每个div分离并将它们附加到body元素上，这样它们就能得到正确的x＆amp;年。现在它运作得很好。

var helppopup;
$(".hashelp").mouseover(function(e){
        offsety = 5;
        offsetx = 5;
            helppopup =  $(this).find(".help").eq(0);
        if(firsttime){
        $("body").append(helppopup.detach());
        helppopup.css("top",(e.pageY+offsety));
        helppopup.css("left",(e.pageX+offsetx));
        helppopup.show();
        }

    }).mouseout(function(){
        $(this).append(helppopup.detach())
        helppopup.hide();
    });

jquery UI-tabs将pop-up div定位在它们附近

1 个答案: