JQ自定义的链接提示问题。

[yesizhu103]

<script type="text/javascript">
        $(document).ready(function () {
            $("a.tooltip").mouseover(function (e) {
                ev = event || window.event;
                function mousePos(ev) {
                    if (ev.pageX || ev.pageY) {
                        return {
                            x: ev.pageX,
                            y: ev.pageY
                        };
                    } return {
                        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                        y: ev.clientY + document.body.scrollTop - document.body.clientTop
                    };
                };
                this.myTitle = this.title;
                this.title = "";
                var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建DIV元素
                $("body").append(tooltip); //追加到文档中
                   $("#tooltip").css({
                 "top":(mousePos(ev).y) + "px",
                    "left":(mousePos(ev).x) + "px"
                }).show("fast");//设置横纵坐标，并且显示

            }).mouseout(function () {
                this.title = this.myTitle;
                $("#tooltip").remove(); //移除
            });
        })

    </script>

<p><a href="#" class="tooltip" title="超链接提示1">提示1</a></p>
<p><a href ="#" class="tooltip" title="超链接提示2">提示2</a></p>
红色标注的地方是我所疑惑的地方，我通过自定义函数获取到鼠标的坐标位置，然后作为链接提示层的位置，可是在界面显示上却显示不出来这个样式。请问是哪儿写错了呢

[yesizhu103]

$("#tooltip").css({ "top":(mousePos(ev).y) + "px", "left":(mousePos(ev).x) + "px"</span> }).show("fast"); 这个地方。。。运行不出效果

[步慢生错]

mousePos这个函数有必要么。。。直接pageX即可。。

[yesizhu103]

引用 2 楼 yukon12345 的回复:

mousePos这个函数有必要么。。。直接pageX即可。。

FF浏览器和IE坐标取值方法不同，才自定义了一个函数。在ie9测试的时候，pageX取不到值，所以才用了这样一个函数

[yesizhu103]

引用 3 楼 u011836122 的回复:

这题目我以前做过呢。 直接用e.pageY和e.pageX就好了。 代码如下，复制粘贴，把JQuery引用改下就好：

    <script type="text/javascript">
        //偏移量
        var x = 10;
        var y = 20;
        $(document).ready(function () {
            $("a.tooltip")
                .mouseover(function (e) {
                    this.myTitle = this.title;
                    //将链接的title置为空。
                    this.title = "";
                    //设置tooltip。
                    var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";
                    $("body").append(tooltip);
                    //设置tooltip样式为红色。position设置为absolute。
                    $("#tooltip").css({
                        "color": "red",
                        "position": "absolute",
                        "top": (e.pageY + y) + "px",
                        "left": (e.pageX + x) + "px"
                    }).show("fast");
                }).mouseout(function () {
                    //mouseout事件，恢复原样。
                    this.title = this.myTitle;
                    $("#tooltip").remove();
                }).mousemove(function (e) {
                    //mousemove事件
                    $("#tooltip").css({
                        "color": "red",
                        "position": "absolute",
                        "top": (e.pageY + y) + "px",
                        "left": (e.pageX + x) + "px"
                    });
                });
        });
    </script>

<body>
    <p><a href="#" class="tooltip" title="这是我的提示1">我的提示1</a></p>
    <p><a href="#" class="tooltip" title="这是我的提示2">我的提示2</a></p>

    <p><a href="#" title="这是自带提示1">自带提示1</a></p>
    <p><a href="#" title="这是自带提示2">自带提示2</a></p>
</body>

对比层主代码，引用了"position": "absolute",这个位置属性，果然成功出现了

[步慢生错]

引用 4 楼 yesizhu103 的回复:

引用 2 楼 yukon12345 的回复:

mousePos这个函数有必要么。。。直接pageX即可。。

FF浏览器和IE坐标取值方法不同，才自定义了一个函数。在ie9测试的时候，pageX取不到值，所以才用了这样一个函数

我说的是query的event.PageX()...

[漫舞云中影]

引用 5 楼 yesizhu103 的回复:

[quote=引用 3 楼 u011836122 的回复:] 这题目我以前做过呢。 直接用e.pageY和e.pageX就好了。 代码如下，复制粘贴，把JQuery引用改下就好：……

对比层主代码，引用了"position": "absolute",这个位置属性，果然成功出现了[/quote] 既然使用JQuery，那就不必考虑不同浏览器兼容性问题！

[漫舞云中影]

这题目我以前做过呢。 直接用e.pageY和e.pageX就好了。 代码如下，复制粘贴，把JQuery引用改下就好：

    <script type="text/javascript">
        //偏移量
        var x = 10;
        var y = 20;
        $(document).ready(function () {
            $("a.tooltip")
                .mouseover(function (e) {
                    this.myTitle = this.title;
                    //将链接的title置为空。
                    this.title = "";
                    //设置tooltip。
                    var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";
                    $("body").append(tooltip);
                    //设置tooltip样式为红色。position设置为absolute。
                    $("#tooltip").css({
                        "color": "red",
                        "position": "absolute",
                        "top": (e.pageY + y) + "px",
                        "left": (e.pageX + x) + "px"
                    }).show("fast");
                }).mouseout(function () {
                    //mouseout事件，恢复原样。
                    this.title = this.myTitle;
                    $("#tooltip").remove();
                }).mousemove(function (e) {
                    //mousemove事件
                    $("#tooltip").css({
                        "color": "red",
                        "position": "absolute",
                        "top": (e.pageY + y) + "px",
                        "left": (e.pageX + x) + "px"
                    });
                });
        });
    </script>

<body>
    <p><a href="#" class="tooltip" title="这是我的提示1">我的提示1</a></p>
    <p><a href="#" class="tooltip" title="这是我的提示2">我的提示2</a></p>

    <p><a href="#" title="这是自带提示1">自带提示1</a></p>
    <p><a href="#" title="这是自带提示2">自带提示2</a></p>
</body>