之前在typecho看到一款主题PureLove，该主题有很多特性。其中，有一个title展示特性，就很好看。只要含有title属性，浏览器就会自动渲染，即鼠标滑过，显示title中的文字。这款主题，将该滑过后的样式修改了。方法，当然是通过js修改title属性，然后再写个css搞定。所以呢，我就扒了相关样式，并发布教程。
JS内容
下面是用到的js内容，请添加到自己的主题中。如果，你要添加到自己的js文件中，请去掉代码中开头跟结尾的script标签。代码中，2-4行表示，以jQuery方式运行tooltip函数代码。所以，你需要引入jQuery，如果主题已经引入，无需重复引用。
<script>
jQuery(document).ready(function ($) {
tooltip();
});
function tooltip() {
$("body *").each(function (b) {
if (this.title) {
var c = this.title;
var a = 30;
$(this).mouseover(function (d) {
this.title = "";
$("body").append('<div id="tooltip">' + c + "</div>");
$("#tooltip").css({
left: (d.pageX + a) + "px",
top: d.pageY + "px",
opacity: "0.8"
}).show(250)
}).mouseout(function () {
this.title = c;
$("#tooltip").remove()
}).mousemove(function (d) {
$("#tooltip").css({
left: (d.pageX + a) + "px",
top: d.pageY + "px"
})
})
}
})
}
</script>CSS内容
然后，再把以下css放置于主题中，即可完成本教程。当然，你也可以自己修改样式。
#tooltip {
background: #f3f3f3;
color: #000;
text-align: center;
padding: 6px 0;
position: absolute;
z-index: 9999;
display: none;
border-radius: 3px;
box-shadow: 0 0 3px #000;
padding: 3px 8px;
font-size: 12px;
text-shadow: none
}后续
如果你的主题没有引用jQuery库，请使用如下代码引用jQuery库。否则，本教程将无法生效。
<script async src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>下面再给个图片预览下。当然了，你把鼠标放在下面的图片上，也会有该特效
pjax回调
现在有很多主题（我当时旧站用的typecho，确实很多人都有pjax）都支持pjax了，所以本代码需要与pjax适配，加入如下代码即可。
<script type="text/javascript">
$(document).on('pjax:complete', function() {
tooltip();
});
</script>上述所有代码都可以在Wordpress等其他程序中使用，即只需添加js、css，以及主题支持jquery库。当然，在写完这篇文章的时候，这个华丽的功能也随之被我去掉了。文中的gif动态图就是本文所描述的效果。
旧站文章，作者：古哥，如若转载，请注明出处：https://iymark.com/articles/360.html
微信扫一扫 
支付宝扫一扫 
