JQuery写的title提示的美化效果

来源：互联网发布：h3c网络认证编辑：程序博客网时间：2024/05/19 06:38

最近项目需求要做一个文字的提示效果，因为原生的title提示样式太丑，所以本人因此用Jquery写了一个简单的title美化效果

闲话少数，直接上代码

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<title>title提示效果美化</title>
<script type="text/javascript" src="../Js/jquery.js"></script>
<script type="text/javascript">

$(function(){

$(".box li a").bind({
//鼠标移动到文字上;
mouseover: function () {

var tooltip = "<div class='tooltip'>"+ this.title +"</div>";
$(this).attr("title","");
$("body").append(tooltip);
$(".tooltip").css({
position: "absolute",
left: event.pageX + 15,
top: event.pageY + 5,
padding: "0 5px",
lineHeight: "2em",
border: "1px solid #000",
backgroundColor: "#f8ff89"
}).show("fast");

},

// 鼠标离开文字;

mouseout: function (){
var textHtml = $(".tooltip").text();
$(this).attr("title",textHtml);
$(".tooltip").remove();
},

// 鼠标移动;
mousemove: function (){
$(".tooltip").css({
left: event.pageX + 15,
top: event.pageY + 5
});
}

});

</script>
<style type="text/css">

*{

margin: 0;
padding: 0;
font-size: 12px;
line-height: 1.5em;

}
.box {

width: 300px;
margin: 30px auto;
font-size: 14px;

}
.box li {

list-style: none;
line-height: 24px;

}
.box li a {

color: #666;
text-decoration: none;

}
.box li a:hover {

color: #f01;

}
.tooltip {

}

</style>

</head>

<body>

<div class="box">
<ul>
<li><a href="#" title="澄清哥的清白,">你这么屌你家人知道么？？？</a></li>
<li><a href="#" title="只是这技术岗位的招聘HR说不懂">是什么给了你如此的自信？？？</a></li>
<li><a href="#" title="哈哈，小样">你就把鼠标移动到我身上吧！！！</a></li>
<li><a href="#" title="真不知道好歹">春节前后到处都在招聘web前端程序员</a></li>
<li><a href="#" title="凡人修仙传">最近爱上看网络小说《凡人修仙传》</a></li>
</ul>
</div>

</body>
</html>

可能美化的样式有点丑，大伙就嫑在意这些细节了

0 0