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 = layer.tips("<span style='color:#000;'>" + fullText + "</span>", that, { tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500 });
                },
                mouseleave: function () {
                    layer.close(tips);
                }
            });

 思路就是,先判断子菜单的通用属性,然后可以打印一下看看子菜单dom下有哪些属性,然后绑定显示 title菜单文字的属性即可;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/686843.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android 动态修改APP图标

文章目录 Android 动态修改APP图标定义activity-alias修改图标和App名监听APP前后台状态切换进入后台时切换修改图标和名字缺点 Android 动态修改APP图标 修改前&#xff1a; 修改后&#xff1a; 定义activity-alias 在 AndroidManifest.xml 中设置 activity-alias&#xff1…

【算法无用系列】电影推荐——余弦相似度计算用户相似度原理

【算法无用系列】通过余弦相似度计算电影、用户相似度 话不多说&#xff0c;本文通过电影推荐系统中&#xff0c;基于余弦相似度算法计算出用户相似和电影相似原理。希望可以帮助一些代码不懂的同学一些思路。 记录用户电影评分数据 一般情况来说&#xff0c;会根据用户的行为…

《贫穷的本质》

穷人获取的信息有限&#xff0c;存在认知上的差距&#xff0c;不了解自己现有的资源&#xff0c;并且合理使用。 self conclusion 1、由以下摘抄1有感而发&#xff1a;童年时期将很大程度上影响未来的发展。 《贫穷的本质》一书告诉我们&#xff0c;孕妇和幼儿时期如果能提供更…

【全开源】CRM管理客户关系系统源码

CRM&#xff1a;助力企业高效管理客户关系 全面解决企业销售团队的全流程客户服务难题&#xff0c;旨在助力企业销售全流程精细化、数字化管理&#xff0c;全面解决企业销售团队的全流程客户服务难题&#xff0c;帮助企业有效盘活客户资源、量化销售行为&#xff0c;合理配置资…

【C语言】学生管理系统:完整模拟与实现

&#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专栏&#xff1a; C笔记 &#x1f308;喜欢的诗句:无人扶我青云志 我自踏雪至山巅 &#x1f525;引言 本篇文章为修改了在校期间实训报告&#xff0c;使用C…

使用Ollama+OpenWebUI部署和使用Phi-3微软AI大模型完整指南

&#x1f3e1;作者主页&#xff1a; 点击&#xff01; &#x1f916;AI大模型部署与应用专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年6月6日23点50分 &#x1f004;️文章质量&#xff1a;96分 欢迎来到Phi-3模型的奇妙世界&#xff01;Phi-3是由微软…

Linux通过安装包配置环境变量(详细教程)

本章教程使用jdk1.8.0_241版本在Linux CentOS系统中,配置Java环境变量。 一、下载安装包 微云下载:https://share.weiyun.com/JeWZMDoh 二、上传安装包 将安装包上传到linux中的opt目录中 三、解压安装包 tar -xzvf jdk-8u241-linux-x64.tar.gz四、配置环境变量 vim /etc/p…

CC++内存管理【new和delete操作符的详细分析】【常见面试题】

C/C内存管理 1.C/C内存分布 我们先来看一段代码&#xff0c;来了解一下C/C中的数据内存分布。 # include <stdlib.h>int globalVar 1; static int staticGlobalVar 1; // 比globalVar还要先销毁,同一个文件下后定义的先析构 // 全局变量存在 数据段&#xff08;静态…

【Linux】ip命令详解

Linux网络排查 目录 一、ip命令介绍 1.1 ip命令简介 1.2 ip命令的由来 二、ip命令使用帮助 2.1 ip命令的help帮助信息 2.2 ip命令对象介绍 2.3 ip命令选项介绍 三、查看网络信息 3.1 显示当前网络接口信息 3.2 显示网络设备运行状态 3.3 显示详细设备信息 3.4 查看…

【Unity实战篇 】 | Unity实现UGUI颜色渐变,支持透明渐变

前言 【Unity实战篇 】 | Unity实现UGUI颜色渐变&#xff0c;支持透明渐变一、双层颜色渐变1.1 组件属性面板1.2 效果及代码 二、多层颜色渐变2.1 组件属性面板2.2 效果及代码 总结 前言 在Unity中UGUI的实现图片和文字颜色渐变效果是一个很常见的需求。下面就来看一下颜色渐变…

爬虫——有道云翻译

废话不多说直接上代码 固定文本内容 import timefrom selenium import webdriver from selenium.common.exceptions import NoSuchElementException, TimeoutException from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWai…

Python接口自动化测试:Json 数据处理实战

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 上一篇说了关于json数据处理&#xff0c;是为了断言方便&#xff0c;这篇就带各位小伙伴实战一下…

SpringBootWeb 篇-深入了解 AOP 面向切面编程与 AOP 记录操作日志案例

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 AOP 概述 1.1 构造简单 AOP 类 2.0 AOP 核心概念 2.1 AOP 执行流程 3.0 AOP 通知类型 4.0 AOP 通知顺序 4.1 默认按照切面类的类名字母排序 4.2 用 Order(数字) 注…

b端系统类管理平台设计前端开发案例

b端系统类管理平台设计前端开发案例

(学习笔记)数据基建-数据质量

数据基建-数据质量 数据质量数据质量保障措施如何推动上下游开展数据质量活动数据质量保障如何量化产出数据质量思考全链路数据质量保障项目 数据质量 概念&#xff1a;数据质量&#xff0c;意如其名&#xff0c;就是数据的准确性&#xff0c;他是数据仓库的基石&#xff0c;控…

【案例分享】印前制版工单系统:“鹿山科技”助力“铭匠数据”重塑业务流程

内容概要 本文介绍了鹿山信息科技通过明道云HAP平台的数字化解决方案提升了铭匠数据在印前制版行业的效率。周口铭匠数据科技有限公司位于河南省周口市沈丘县&#xff0c;是一家专注于印前制版设计服务的公司&#xff0c;成立于2023年。企业在销售业务、版材制作生产和美工设计…

CATIA入门操作案例——草图绘制案例,导入草图图片,尺寸约束直径/半径切换,草图分析闭合检查,草图固定

目录 引出草图绘制&#xff0c;导入图片方便绘制新建product&#xff0c;进入sketch tracer模块技巧&#xff1a;尺寸直径 / 半径切换技巧&#xff1a;右键&#xff0c;自动搜索 草图分析&#xff1a;检查闭合警告&#xff1a;Change it to material mode to see the Paintings…

60V大功率半桥GaN半桥驱动器替代LMG1210

1. 产品特性&#xff08;替代LMG1210&#xff09; ➢ 工作频率高达 10MHz ➢ 20ns 典型传播延迟 ➢ 5ns 高侧/低侧匹配 ➢ 两种输入控制模式 ➢ 具有可调死区时间的单个 PWM 输入、 独立输入模式 ➢ 1.5A 峰值拉电流和 3A 峰值灌电流 ➢ 内置 5V LDO ➢ 欠压保护 ➢ 过…

小程序简单版录音机

先来看看效果 结构 先来看看页面结构 <!-- wxml --><view class"wx-container"><view id"title">录音机</view><view id"time">{{hours}}:{{minute}}:{{second}}</view><view class"btngroup"…

【人工智能】第七部分:ChatGPT的未来展望

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…