2 chungou chungou 于 2017.09.14 19:32 提问

jQuery实现超链接提示效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<style>
    #tooltip {
        position: absolute;
        border: 1px solid #333;
        background: #f7f5d1;
        padding: 1px;
        color: #333;
        display: none;
    }
</style>
<body>
    <p><a href="#" class="tooltip"title="超链接提示1">提示1.</a> </p>
    <p><a href="#" class="tooltip"title="超链接提示2">提示2.</a> </p>
</body>
<script>
    $(function () {
        var x=10;
        var y=20;
        $("a.tooltip").mouseover(function (e) {
            this.myTitle=this.title;
            this.title="";
            var tooltip="<div id='tooltip'>"+this.myTitle+"<\/div>";
            $("body").append(tooltip);
            $("tooltip").css({
                "top":(e.pageY+y)+"px",
                "left":(e.pageX+x)+"px"
            }).show("fast");
        }).mouseout(function () {
            this.title=this.myTitle;
            $("#tooltip").remove();
        }).mousemove(function (e) {
            $("#tooltip").css({
                "top":(e.pageY+y)+"px",
                "left":(e.pageX+x)+"px"
            });
        });
    })
</script>
</html>

3个回答

showbo
showbo   Ds   Rxr 2017.09.15 08:30
已采纳
             $("tooltip").css({
                        ====>选择器错了,少了#
                        $("#tooltip").css({
caozhy
caozhy +1
2 个月之前 回复
devmiao
devmiao   Ds   Rxr 2017.09.14 23:50
sunny_desmond
sunny_desmond   2017.09.15 09:22
$("tooltip").css({
            "top": (e.pageY + y) + "px",
            "left": (e.pageX + x) + "px"
        }).show("fast");

改成

$("#tooltip").css({
            "top": (e.pageY + y) + "px",
            "left": (e.pageX + x) + "px"
        }).show("fast");
Csdn user default icon
上传中...
上传图片
插入图片