欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-22 15:55:59
先上图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代码

先上图

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

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

相关标签: javascript