zoukankan      html  css  js  c++  java
  • html鼠标悬停显示title html内容

    最近碰到一个问题,鼠标悬停到A标签时显示一个div,查了一下才知道是title属性里面的内容

    直接上代码

        //个性title提示样式
        $(function () {
            $("a").each(function (b) {//这里是控制标签
               if (this.title) {
                   var c = this.title; //把title的赋给自定义属性 myTilte ,屏蔽自带提示
                   var a = 30; //设置提示框相对于偏移位置,防止遮挡鼠标
                   $(this).mouseover(function (d) { //鼠标移上事件
                       this.title = "";
                       //alert(c);
                       $("body").append('<div id="tooltip" style="z-index:100000;100px;height:100px;background-color:red;position:absolute;">' + c + "</div>"); //创建提示框,添加到页面中
                        $("#tooltip").css({
                          left: (d.pageX + a) + "px",
                         top: d.pageY + "px",
                            opacity: "1"
                        }).show(250) //设置提示框的坐标,并显示
                        
                    }).mouseout(function () { //鼠标移出事件
                        this.title = c; //重新设置title
                        $("#tooltip").remove() //移除弹出框
                   }).mousemove(function (d) { //跟随鼠标移动事件
                       $("#tooltip").css({
                            left: (d.pageX + a) + "px",
                           top: d.pageY + "px"
                        })
                    })
                }
            })
        });

    样式的话自己调一下这里就不在美化了。html代码里面a标签里面要有title

  • 相关阅读:
    《软件需求模式》阅读笔记二
    《软件需求模式》阅读笔记一
    《编写有效用例》阅读笔记三
    《编写有效用例》阅读笔记二
    《编写有效用例》阅读笔记一
    《软件需求十步走》阅读笔记三
    英文一分钟自我介绍
    c语言面试常见题
    docker
    LLDP
  • 原文地址:https://www.cnblogs.com/ljl0513/p/5010206.html
Copyright © 2011-2022 走看看