有时候默认的title不能满足我们的审美，并且出来的及其缓慢，这时候就需要自定义title的样式了，这里用jQuery来做
<!DOCTYPE html><html><head>
<title></title>
<meta charset="utf-8">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦