jQuery改边默认title样式-原创手记-慕课网

有时候默认的title不能满足我们的审美，并且出来的及其缓慢，这时候就需要自定义title的样式了，这里用jQuery来做

<!DOCTYPE html><html><head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        div {            margin: 10 auto;            width: 150px;            text-align: center;
        }        p {            background-color: #F5EE13;            margin-right: 10px;            padding: 10px;
        }        #title {            position: absolute;            border: 1px solid #333;            background-color: #BA92BC;            padding: 1px;            color: #333;            display: none;
        }    </style>
    <script>
        //改变默认样式
        $(function() {            // var x = 10;
            // var y = 20;
            var x = 5;            var y = 5;  // x和y表示了title框与元素之间横轴和纵轴之间的距离
            $("p.title").mouseover(function(e) {                this.myTitle = this.title; //获取默认的title
                this.title = ""; //获取后将默认的清空
                var title = "<div id='title'>" + this.myTitle + "<\/div>"; //创建新的 div 元素，在CSS样式中已定义样式
                $("body").append(title); //把它追加到文档中
                $("#title").css({                    "top": (e.pageY + y) + "px",                    "left": (e.pageX + x) + "px"
                }).show("fast"); //设置x坐标和y坐标，并且快速显示
            }).mouseout(function() {                this.title = this.myTitle;
                $("#title").remove(); //光标离开时移除 
            })
        })    </script></head><body>
    <div>
        <p title='默认样式'>默认样式</p>
        <p title='修改后的样式' class="title">修改后的样式</p>
    </div></body></html>

作者：椰果粒
链接：https://www.jianshu.com/p/bc4ab5ef073c