愚柴 2017-09-14 11:32 采纳率: 37.5%
浏览 1210
已采纳

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条回答

  • Go 旅城通票 2017-09-15 00:30
    关注
                 $("tooltip").css({
                            ====>选择器错了,少了#
                            $("#tooltip").css({
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 鸿业暖通修改详细负荷时闪退
  • ¥15 有偿求码,CNN+LSTM实现单通道脑电信号EEG的睡眠分期评估
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)
  • ¥20 matlab yalmip kkt 双层优化问题
  • ¥15 如何在3D高斯飞溅的渲染的场景中获得一个可控的旋转物体