jQuery改边默认title样式

作者: 椰果粒 | 来源:发表于2017-08-05 09:01 被阅读62次

jQuery改边默认title样式
CSS全局样式的设置
echarts API 学习笔记
web前端 -- Day5基础知识
knowledge point
select
修改默认样式
关于`UIButton`的`edgeInsets`的一些小细节
jQuery分页插件支持IE8
echarts关系图配置详解

有时候默认的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>