【Layui】layui左侧菜单栏，鼠标悬停显示菜单文字

厦门德仔

于 2024-09-12 15:23:17 发布

阅读量114

点赞数 1

分类专栏： #Layui 文章标签： layui javascript ecmascript

本文链接：https://blog.csdn.net/david_520042/article/details/142177134

版权

#Layui 专栏收录该内容

46 篇文章 6 订阅 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

layui左侧菜单栏，鼠标悬停显示菜单文字

layui封装的左侧菜单是固定宽度的，且左侧菜单栏在css里改变宽度，效果并不是很好（还设计头部菜单栏），如果写js来让菜单栏能够拉伸，也比较麻烦，那怎么最简单的，让用户看到菜单的文字呢。使用鼠标悬停事件：
在这里插入图片描述
显示效果，发现如果文字过多，会自动省略，能够鼠标悬停上去显示全部，才是用户想看到的效果。

给左侧菜单栏添加监控：

            $('.layui-nav-child a').on({              
                mouseenter: function () {
                    var that = this;
                    var tips;
                    var fullText = that.textContent;
                    //console.log(that.textContent)
                    tips =