原理是判断每个a标签是否有title属性,如果有获取title内容,然后移除title,新建一个title添加设置位置和标签样式和id,鼠标悬浮显示,移走移除这个标签不显示,

暂时只在文章内容设置样式,

\blog\templates\detail.html

<script type="text/javascript">
        $(function () {
            var x = 0;
            var y = 100;
            var newtitle = '';
            $('a').mouseover(function (e) {
                if(this.title != ""){
                    newtitle = this.title;
                    this.title = '';
                    $('body').append('<div id="mytitle" >' + newtitle + '</div>');
                    {#alert(e.pageX+','+ e.pageY+"----"+x+','+y);#}
                    $('#mytitle').css({
                        'left': (e.pageX + x + 'px'),
                        'top': (e.pageY + y - 80 + 'px'),
                        'position': 'absolute',
                        'color': '#ffffff',
                        'max-width': '50%',
                        'font-size': '18px',
                        'padding': '4px',
                        'background': 'rgba(40, 40, 40, 0.8)',
                        'border': 'solid 1px #e9f7f6',
                        'border-radius': '5px',
                    }).show();


                    $(this).mouseout(function () {
                        this.title = newtitle;
                        $('#mytitle').remove();
                    })
                }
            })
        });
    </script>

要想不跳转url设置#点击查看,和显示名字一样,多个#

点击查看

右边点击