纯代码修改html网页中title标签的样式

4.4
(5)

之前在typecho看到一款主题PureLove,该主题有很多特性。其中,有一个title展示特性,就很好看。只要含有title属性,浏览器就会自动渲染,即鼠标滑过,显示title中的文字。这款主题,将该滑过后的样式修改了。方法,当然是通过js修改title属性,然后再写个css搞定。所以呢,我就扒了相关样式,并发布教程。

纯代码修改html网页中title标签的样式

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>

下面再给个图片预览下。当然了,你把鼠标放在下面的图片上,也会有该特效

纯代码修改html网页中title标签的样式

pjax回调

现在有很多主题(我当时旧站用的typecho,确实很多人都有pjax)都支持pjax了,所以本代码需要与pjax适配,加入如下代码即可。

<script type="text/javascript">
$(document).on('pjax:complete', function() {
tooltip();
});
</script>

上述所有代码都可以在Wordpress等其他程序中使用,即只需添加js、css,以及主题支持jquery库。当然,在写完这篇文章的时候,这个华丽的功能也随之被我去掉了。文中的gif动态图就是本文所描述的效果。

共计5人评分,平均4.4

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

文章目录

旧站文章,作者:古哥,如若转载,请注明出处:https://iymark.com/articles/360.html

(0)
微信公众号
古哥的头像古哥管理团队
上一篇 2020年10月09日 23:50
下一篇 2020年10月10日 23:11

你可能感兴趣的文章

发表回复

登录后才能评论
微信小程序
微信公众号