有时候默认的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>
网友评论