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

news2024/11/24 9:35:13

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菜单文字的属性即可;

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TIM时钟中断——输出捕获、输入捕获、编码器接口测速

输出捕获 通道与DMA 计算机中的通道是一种专用于输入/输出&#xff08;I/O&#xff09;操作的控制器&#xff0c;它充当了主机&#xff08;包括CPU和内存&#xff09;与外部设备之间数据传输的桥梁。通道的主要目的是提高系统的并行处理能力&#xff0c;允许CPU与I/O设备同时工…

探秘Facebook:社交媒体的未来之路

Facebook&#xff0c;作为全球最大的社交媒体平台之一&#xff0c;一直处于数字社交革命的前沿。然而&#xff0c;随着科技和社会的不断发展&#xff0c;Facebook正面临着新的挑战和机遇。本文将探索Facebook的未来之路&#xff0c;揭示社交媒体的新趋势和发展方向。 1. 深度社…

二、Nginx目录结构与基本运行原理

目录 一、目录结构 二、运行原理 一、目录结构 我们使用tree 命令查看nginx的目录。如果tree 命令失效&#xff0c;需要安装tree工具 [rootlocalhost local]# yum install -y tree[rootlocalhost /]# tree /usr/local/nginx /usr/local/nginx ├── client_body_temp # PO…

PDF软件PDF Extra Premium + Ultimate 9.30.56026

PDF Extra Premium是一个适用于Windows的程序,它提供了所有功能,***在一个地方处理PDF文件的需要。使用此程序,您可以: 扫描和识别文本。您可以轻松地将纸质文档扫描并数字化为可编辑的PDF文件。您可以使用手机的摄像头扫描任何类型的纸质文档:支票、合同、票据、票据、证…

外贸物流与报关操作全解析:避开那些常见的坑

外贸物流与报关是外贸流程中至关重要的环节&#xff0c;任何疏漏都可能导致货物延误、额外费用甚至违约赔偿。本文将详细解析外贸物流与报关操作的关键要点&#xff0c;并告诉你如何避开常见的坑。 一、外贸物流操作 外贸物流&#xff0c;即货物进出口的运输过程&#xff0c;涉…

JDK7 JDK8 JDK9接口中的默认方法、静态方法、私有方法

JDK8开始之后接口新增的方法 JDK7以前&#xff1a;接口中只能定义抽象方法 JDK8的新特性&#xff1a;接口中可以定义有方法体的方法&#xff08;默认、静态&#xff09; JDK9的新特性&#xff1a;接口中可以定义私有方法 接口中的默认方法InterA package com.itheima.a06;p…

【C++题解】 1468. 小鱼的航程

问题&#xff1a;1468. 小鱼的航程 类型&#xff1a;需要找规律的循环 题目描述&#xff1a; 有一只小鱼&#xff0c;它上午游泳150公里&#xff0c;下午游泳100公里&#xff0c;晚上和周末都休息&#xff08;实行双休日)&#xff0c;假设从周x(1<x<7)开始算起&#xf…

C语言基础——函数

ʕ • ᴥ • ʔ づ♡ど &#x1f389; 欢迎点赞支持&#x1f389; 个人主页&#xff1a;励志不掉头发的内向程序员&#xff1b; 专栏主页&#xff1a;C语言基础&#xff1b; 文章目录 前言 一、函数的概念 二、库函数 2.1 库函数和头文件 2.2 库函数的使用/…

python中关于函数的两种链式调用

函数之间的嵌套调用之函数的返回值就是另一个函数的参数 用一个函数的返回值作为另一个函数的参数。 如上图所示&#xff0c;将is0dd&#xff08;10&#xff09;的结果交给print函数来执行。 如上图所示&#xff0c;也是一个链式调用的案例&#xff0c;先将add&#xff08;x&a…

Linux宝塔部署数据库连接问题

博主在部署项目时发现网页可以成功部署&#xff0c;但是登录界面一直登录不进去推测是数据库连接问题。 博主当时在IDEA中写的是用户名为root 密码123456 但是在宝塔中因为自己是跟着教程学的所以就顺手把用户名和密码都改了&#xff0c;于是java中的配置和数据库配置连接不上…

toB市场 | 我们喜欢赞助这样的展会活动

过去的六一儿童节&#xff0c;刚去成都参加了个行业内的展会。受护网行动、儿童节等等的影响&#xff0c;这次去成都的客户并不算太多&#xff0c;但会议延续了一贯的高品质&#xff0c;让我们收货满满。 选择目标受众来得多的展会 不同厂商会视自己的产品和模式、目标客户来…

15天搭建ETF量化交易系统Day7—全自动化交易系统

搭建过程 每个交易者都应该形成一套自己的交易系统。 很多交易者也清楚知道&#xff0c;搭建自己交易系统的重要性。现实中&#xff0c;从&#xff10;到&#xff11;往往是最难跨越的一步。 授人鱼不如授人以渔&#xff0c;为了帮助大家跨出搭建量化系统的第一步&#xff0c;我…

热搜爆了!AI秒写3篇湖南高考作文,邀你来打分!

今天上午 全国高考语文科目结束 作文题目成为焦点 相关话题立刻冲上热搜 今年湖南高考采用的是新课标 I 卷 作文题涉及到了人工智能 引发大量网友讨论 ↓↓↓ 随着互联网的普及、人工智能的应用&#xff0c;越来越多的问题能很快得到答案。那么&#xff0c;我们的问题是…

零基础入门学用Arduino 第一部分(一)

重要的内容写在前面&#xff1a; 该系列是以up主太极创客的零基础入门学用Arduino教程为基础制作的学习笔记。个人把这个教程学完之后&#xff0c;整体感觉是很好的&#xff0c;如果有条件的可以先学习一些相关课程&#xff0c;学起来会更加轻松&#xff0c;相关课程有数字电路…

编程规范-代码检测-格式化-规范化提交

适用于vue项目的编程规范 – 在多人开发时统一编程规范至关重要 1、代码检测 --Eslint Eslint&#xff1a;一个插件化的 javascript 代码检测工具 在 .eslintrc.js 文件中进行配置 // ESLint 配置文件遵循 commonJS 的导出规则&#xff0c;所导出的对象就是 ESLint 的配置对…

SG3225EEN贴片差分晶振可实现高频高精度的要求

在高速通信和高性能电子设备的发展中&#xff0c;高频高精度时钟源的需求日益增加。SG3225EEN贴片差分晶振以其出色的性能&#xff0c;满足了这一需求&#xff0c;成为这些应用领域的理想选择。SG3225EEN贴片差分晶振采用先进的制造工艺&#xff0c;提供高精度和低抖动的时钟信…

005.FashionMNIST数据集简介

一、FashionMNIST数据集简介 FashionMNIST数据集&#xff0c;作为经典的MNIST数据集的现代替代品的数据集&#xff0c;是衣物分类数据集&#xff0c;由Zalando&#xff08;一家德国的在线时尚零售商&#xff09;发布。 FashionMNIST数据集和MNIST相比。图片尺寸相同&#xff0c…

超声波风速仪—快速捕捉气象变化

TH-WQX2超声波风速仪&#xff0c;特别是在风力发电中作为风速风向仪的应用&#xff0c;是一种基于超声波原理测量风速和风向的设备。以下是对其特点、技术参数和应用的详细介绍&#xff1a; 特点 高精度测量&#xff1a;超声波风速风向仪利用超声波在空气中的传播速度随风速变化…

2024下《系统集成项目管理工程师》50个高频考点汇总!值得收藏

宝子们&#xff01;5月软考考完了&#xff0c;终于可以考系统集成了&#xff01; 整理了50个高频考点&#xff0c;涵盖全书90%考点&#xff0c;先把这个存下&#xff01;再慢慢看书&#xff0c;边看书边背这个 1、信息安全的基本要素有&#xff1a; &#xff08;1&#xff09…

爬取股票数据python

最近在搜集数据要做分析&#xff0c;一般的数据来源是一手数据&#xff08;生产的&#xff09;和二手数据&#xff08;来自其他地方的&#xff09;。 今天我们爬取同花顺这个网站的数据。url为&#xff1a;https://data.10jqka.com.cn/ipo/xgsgyzq/ 话不多说直接上代码。有帮…