首页 » 建站手册 » 纯代码修改html网页中title标签的样式

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

谷歌已收录,更新于2018年12月31日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

说明

之前在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>

下面再给个图片预览下。当然了,你把鼠标放在下面的图片上,也会有该特效,
纯代码修改html网页中title标签的样式

pjax回调

现在有很多主题都支持pjax了,所以本代码需要与pjax适配,加入如下代码即可。

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

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

已有 3 条评论

  1. 七越 七越说道:

    可以的,给大佬来捧场子咯

    1. 枂下 枂下说道:

      今天这场子有点冷清

  2. 枂下 枂下说道:

    如果主题不支持pjax,请不要填写最后一段pjax回调代码

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫