typecho看到一款主题PureLove,该滑过后的样式修

之前在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库。当然，在写完这篇文章的时候，这个华丽的功能也随之被我去掉了。文中的jpg动态图就是本文所描述的效果。