鼠标移动到a连接弹出自定义提示框的位置上问题

<script src="../scripts/jquery-2.1.4.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("a.tooltip").mouseover(function(e) {
            var tooltip = "<div id='tooltip'>" + this.title + "</div>";
            $("body").append(tooltip);
            $("#tooltip")
                .css({
                    "top": e.pageY + "px",
                    "left": e.pageX + "px"
                }).show("fast");
        }).mouseout(function() {
            $("#tooltip").remove();
        });
    })
</script>
    <p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p>
    <p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a></p>

鼠标移动到a标签上,自定义的提示框却出现在下面,而不是鼠标触碰a标签的那个位置,我弹出鼠标的X,Y坐标都是正常的。

如图:
图片描述

图片描述

阅读 4.2k
3 个回答

为CSS添加position:absolute属性

要用绝对定位吧,否则相对父节点定位

和<div>都是块级标签,而你是直接append<body>里面,就是放在<body>里面的最后。所以你hover的时候,提示都在最下面!你可以打开控制台看看元素。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题