当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 页面增加问号图标,鼠标放置会提示文字信息。（记录日志）

页面增加问号图标,鼠标放置会提示文字信息。（记录日志）

2020年07月17日  | 移动技术网IT编程  | 我要评论

先上图

css样式

/*提示框*/
#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;
}

实现这种效果的js代码

<img src="../images/question.png" class="mytooltip" title="这是一段提示的详细信息,内容待确定" style="position: absolute;top: 10px; right: 30px; width: 15px;cursor:pointer;">

$(function () {
    var x = 10;
    var y = 20;
    var newtitle = '';
    var mytitleId = '';
    $('img.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) {
        mytitleId = this.id;
        if (mytitleId=="pdl" || mytitleId=="ptv"){
            $('#mytitle').css({
                'left': (e.pageX + x +10 + 'px'),
                // 'top': (e.pageY + y - 60 + 'px')
                'top': (e.pageY + y - 120 + 'px')
            }).show();
        }else{
            $('#mytitle').css({
                'left': (e.pageX + x +10 + 'px'),
                'top': (e.pageY + y - 60 + 'px')
                // 'top': (e.pageY + y - 110 + 'px')
            }).show();
        }

    })
});

本文地址：https://blog.csdn.net/xiexinxx0225/article/details/107376044

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网