1

对于我的页面，我使用 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>
4

1 回答 1

0

在查看了 div 的位置后，我解决了这个问题。由于它们是嵌套的，它们的行为很糟糕，所以我分离了每个 div 并将它们附加到 body 元素中，这样它们就可以得到正确的 x & y。现在它工作得很好。

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();
    });
于 2012-09-06T22:57:30.657 回答