自定义html标签中 title的样式---转载

最新推荐文章于 2024-05-11 09:39:24 发布

逆风优雅

最新推荐文章于 2024-05-11 09:39:24 发布

阅读量1.8k

点赞数 1

分类专栏： js 文章标签： html javascript 前端

原文链接：https://www.cnblogs.com/lanbei-2018/p/10712445.html

版权

js 专栏收录该内容

63 篇文章 1 订阅

订阅专栏

html部分：

 <div class="zl-num one-zkfb" title='<span class="max">最大值：50</span> <br/><span class="min">最小值：50</span>'>
                        <img src="${basePath}/images/pages/impedanceAnalysis/vice-RadNum.png" />
                        <div><p class="branchboxNum" style="color:#4bbddd;font-size:32px;">0</p>
                            </br><p >一级分支线阻抗均值
                               
                            </p>
                        </div>
                    </div>

js 部分：

    $(function () {
        var x = 10;
        var y = 20;
        var newtitle = '';
        // 一级分支线阻抗均值 悬停信息
        $('div.one-zkfb').mouseover(function (e) {
            newtitle = this.title;
            this.title = '';
            $('body').append('<div id="mytitle" >' + newtitle + '</div>');
            $('.max').html('最大值：60')  // 可以对title中的标签内容进行修改

            $('#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({ // title框的样式
                'left': (e.pageX + x +10 + 'px'),
                'top': (e.pageY + y - 20 + 'px')
            }).show();
        })
    });

css部分：

    #mytitle {
        width: 120px;
        height: 80px;
        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:10px !important;
        text-align: center;
        line-height: 30px;
    }

效果图：