不能听命于自己者,就要受命于他人。网站首页学海无涯

通过JS简单实现html title效果

陈佚2019-07-30 10:11:54473人围观工作记录
简介正在美化博客快递查询的页面,由于快递logo过多,想通过title方式进行提示,但是默认的样式真的是不敢恭维。样式太丑,字太小(类似修改title样式 )

首先看一下默认的样式

image.png

字比较小,而且样式比较难看。title样式是不支持css修改的。所以我们只能通过js的方式来实现我们想要的title效果

先来看一下效果。可以按自己的想法进行修改。

image.png

现在说一下简单步骤

  1. 因为我们看到的title提示框其实是JS创建的DIV 所以我们要定义好样式

/*修改提示框*/
    #mytitle {
        position: absolute;
        color: #ffffff;
        max-width: 160px;
        font-size: 14px;
        padding: 4px;
        background: rgba(40, 40, 40, 0.8);
        border: solid 1px #e9f7f6;
        border-radius:5px;
    }

  2.然后加入JS(基于jquery)代码,使悬停是出现样式

$(function () {
        var x = 10;
        var y = 20;
        var newtitle = '';
        $('span.mytooltip').mouseover(function (e) {
            newtitle = this.title;
            this.title = '';
            $('body').append('<div id="mytitle" >' + newtitle + '</div>');
            $('#mytitle').css({
                'left': (e.pageX + x + 'px'),
                'top': (e.pageY + y - 80 + 'px')
            }).show();
        }).mouseout(function () {
            this.title = newtitle;
            $('#mytitle').remove();
        }).mousemove(function (e) {
            $('#mytitle').css({
                'left': (e.pageX + x +10 + 'px'),
                'top': (e.pageY + y - 60 + 'px')
            }).show();
        })
    });
newtitle 是需要显示的文字,如果显示不是title文字的话可以在这里修改

文章评论

    共有1条评论来说两句吧...