layui实现鼠标移入/移出时显示/隐藏tips

layui实现鼠标移入/移出时显示/隐藏tips弹窗

注:其它弹窗亦可按照此方法实现相同效果

鼠标移入 dom 或 tips 区域,显示 tips 弹窗;

鼠标移出 dom 或 tips 区域,隐藏 tips 窗口;

<div id="box">鼠标移入移出</div><script src="./js/jquery-1.11.0.min.js"></script>
<script src="./js/layui.js"></script>
<script type="text/javascript">layui.use('layer', function() {const layer = layui.layer;let timer_event, layer_tips, tips_show = false$('#box').on({'mouseenter': function () {clearTimeout(timer_event)if(tips_show) returnlayer_tips = layer.tips(`<p id='tips-box'>tips content</p>`, $(this), {time:0,closeBtn: '1',maxWidth: 200,tips: 3,success: function () {tips_show = true$('.layui-layer-tips .layui-layer-content').css({'padding': '10px','border': '1px solid #666',})$('#tips-box').on({'mouseenter': function () {clearTimeout(timer_event)},'mouseleave': function () {hideTips()}})}}) },'mouseleave': function () {hideTips()}})function hideTips() {clearTimeout(timer_event)timer_event = setTimeout(()=>{layer.close(layer_tips)tips_show = false}, 200)}})
</script>

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

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

相关文章

如何发布自己的 npm 包

创建 npm 包项目 创建项目目录&#xff1a; 在本地创建一个新的项目目录&#xff0c;并进入该目录。 初始化项目&#xff1a; 在命令行中运行以下命令初始化 npm 项目&#xff1a; npm init 按照提示填写项目信息&#xff0c;包括包名、版本、描述等。 编写代码 在项目目录…

react 怎样向ant table添加按钮,以及文本溢出隐藏?

这些都是一些组件自带的方法&#xff0c;只不过是不知道该怎么用&#xff0c;上面的内容可以直接拿去用&#xff0c;&#xff08;事件除外&#xff0c;要自己绑&#xff0c;还有引入的组件&#xff09;&#xff01;

Go常见的语法题目

1、下面代码能运行吗&#xff1f;为什么。 type Param map[string]interface{}type Show struct {Param }func main1() {s : new(Show)s.Param["RMB"] 10000 }解析 共发现两个问题&#xff1a; main 函数不能加数字。new 关键字无法初始化 Show 结构体中的 Param…

数据结构:栈和队列的练习题1(括号匹配问题)

题目描述&#xff1a; 思路&#xff1a;我们首先可以把出现的情况大致分为以下几类&#xff1a; 因为涉及匹配问题&#xff0c;所以所有的左括号和右括号肯定要分开来整理。如果我们直接去匹配的话&#xff08;像第一行的从左到右独立匹配&#xff09;是行得通的&#xff0c;但…

C/C++|我们为什么应该使用 `std::make_shared` 创建 `std::shared_ptr`

std::make_shared 是 C11 引入的一个工厂函数&#xff0c;用于创建 std::shared_ptr。与直接使用 new 并将其传递给 std::shared_ptr 构造函数相比&#xff0c;std::make_shared 提供了一种更高效、更安全的方法来分配和管理动态内存。 前置知识1&#xff1a; 当我们调用诸如&a…

关于d3js生成节点画布的个人笔记

实现功能 根据鼠标位置生成节点根据节点位置通过鼠标拖拽生成连线实现自定义线段颜色功能删除节点以及连线功能实现单个节点拖动功能实现整条线路的拖动功能 界面如下&#xff1a; 主要模块介绍 绘制连线 const line svg.selectAll(".line").data(links, d >…

【Linux】Git超详细教程:手把手教你(gitee版)--版本管理+远程仓库克隆(初学者必看!!!)

目录 一、前言 二、git 的深度理解 &#x1f95d; 什么是 git ? &#x1f347; git 的历史发展&#xff08;理解 git 的由来&#xff09; &#x1f34b; 感性理解 git 的版本管理 三、git 的安装 ✨Window 终端安装 ✨Linux 安装 四、git 的工作流程 五、如何在 Linux …

音视频开发—视频相关概念:YUV与RGB

文章目录 YUV相关概念组成部分优点常见的 YUV 格式数据量的计算YUV4:2:0 存储格式平面模式&#xff08;planar):打包模式&#xff08;packed&#xff09; RGB 和 YUV 的定义关系与转换RGB 到 YUV 的转换YUV 到 RGB 的转换 使用场景优缺点 YUV相关概念 YUV 是一种颜色编码格式&…

JVM-JAVA-类加载过程

JVM源码 类加载到 JVM 的过程通过 java 命令执行代码的流程 类加载到 JVM 的过程 在运行一个 main 函数启动程序是&#xff0c;首先需要类加载起把主类加载到 JVM 中 通过 java 命令执行代码的流程 loadClass的类加载过程有如下几步&#xff1a; 类被加载到方法区中后主要包…

Maven项目通过maven central 发布到中央仓库 https://repo.maven.apache.org/ 手把手教学 最新教学

一、注册maven central账号 ​ https://central.sonatype.com/publishing/namespaces 我这里直接使用github账号登录 &#xff0c;可以自己注册或者直接使用google账号或者github账号登录 这里github账号登录之后 应该只出现io.github 下面的io.gitee我也验证过 所以这里出…

Java时间类--JDK8

为什么JDK8会又新增时间相关类呢&#xff1f; ① JDK7的时间对象如果需要比较大小的话&#xff0c;必须都先转换成毫秒值&#xff1b;JDK8则不需要&#xff0c;可以直接比较。 ② JDK7的时间对象可以修改&#xff0c;在多线程环境下就会导致数据不安全&#xff1b;JDK8不能修改…

数据库open报ORA-600 kcratr_scan_lastbwr故障处理---惜分飞

由于断电&#xff0c;导致数据库正常open报ORA-600 kcratr_scan_lastbwr错误 Wed Jan 17 18:23:26 2024 ALTER DATABASE MOUNT Successful mount of redo thread 1, with mount id 1028618590 Database mounted in Exclusive Mode Lost write protection disabled Completed:…

【Git】在错误分支上开发了怎么办

情况一&#xff1a;还未提交 git add . 『暂存修改的代码』git stash 『把暂存的文件提交到git的暂存栈』git checkout 『本该提交代码的分支』git stash pop 『取出暂存栈中的代码』 情况二&#xff1a;已提交 git checkout 『不该提交代码提交了代码的分支』git reset HEA…

输入3个字符串,要求将字母按由小到大顺序输出

对于将3个整数按由小到大顺序输出&#xff0c;是很容易处理的。可以按照同样的算法来处理将3个字符串按大小顺序输出。可以直接写出程序。 编写程序&#xff1a; 运行结果&#xff1a; 这个程序是很好理解的。在程序中对字符串变量用关系运算符进行比较&#xff0c;如同对数值…

【Git 版本管理】合并 + 变更,看懂Git

看懂 Git 合并操作分离 HEAD分离 HEAD 测试 相对引用(^ || ~)操作符 ^相对引用 ^ 测试操作符 ~相对引用 ~ 测试 撤销变更Git ResetGit Revert撤销变更 测试 整理提交记录Git Cherry-pick测试 交互式 rebase交互式 rebase 测试 合并操作 关键字&#xff1a;commit、branch、merg…

Minio篇:初识MinIO

1. MinIO快速入门 1.1.MinIO核心概念 下面介绍MinIO中的几个核心概念&#xff0c;这些概念在所有的对象存储服务中也都是通用的。 对象&#xff08;Object&#xff09; 对象是实际的数据单元&#xff0c;例如我们上传的一个图片。 存储桶&#xff08;Bucket&#xff09; 存储…

基于单片机的机械臂的研究

摘要 &#xff1a; 工业机器人是现代科学技术的融合下的产物&#xff0c;属于机电自动化设备的一种。机械臂作为工业机器人的核心&#xff0c;在提高工业生产效率的同时&#xff0c;也保障了工作人员的身心安全。本文以某款基于单片机的机械臂为例&#xff0c;对机械臂的设计方…

【JAVA SE】多态

✨✨欢迎大家来到Celia的博客✨✨ &#x1f389;&#x1f389;创作不易&#xff0c;请点赞关注&#xff0c;多多支持哦&#x1f389;&#x1f389; 所属专栏&#xff1a;JAVA 个人主页&#xff1a;Celias blog~ 目录 引言 一、多态 1.1 多态的概念 1.2 多态的实现条件 1.3…

AI未来预测

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经成为了当今世界的热门话题。从自动驾驶汽车到智能家居&#xff0c;从虚拟助手到机器人&#xff0c;AI的应用已经渗透到了我们生活的方方面面。在未来&#xff0c;AI将会继续改变我们的生活方式&#xff0…

深入探讨 Android 的 View 显示过程与源码分析

文章目录 1. 探讨 Android 的 View 显示过程1.1. onFinishInflate1.2. onAttachedToWindow1.3. onMeasure1.4. onSizeChanged1.5. onLayout1.6. onDraw 2. 系统代码分析1.1. onFinishInflate1.2. onAttachedToWindow1.3. onMeasure1.4. onSizeChanged1.5. onLayout1.6. onDraw …