设置了pointer-events: none;后,鼠标悬停不会触发el-tooltip的显示逻辑

server/2024/12/14 11:52:16/

问题:

el-tooltip是一个提供文字提示的组件,通常依赖于鼠标悬停(hover)事件来显示提示信息。当内层元素设置了pointer-events: none;后,鼠标悬停事件会穿过这个内层元素,不会触发el-tooltip的显示逻辑。如何解决这个问题,才能在内层元素设置了pointer-events: none后依然能够触发el-tooltip的显示逻辑

方法一:移除或修改 pointer-events: none;

如果可能的话,最直接的方法是移除内层元素的 pointer-events: none; 样式。这通常是最简单的解决方案,但可能不适用于所有情况,特别是当这个样式是出于其他设计或功能需求而设置时。

方法二:使用包装元素

如果内层元素必须保持 pointer-events: none;,你可以考虑在内层元素外部添加一个包装元素,并将 el-tooltip 应用到这个包装元素上。确保包装元素没有设置 pointer-events: none;,这样鼠标事件就可以被捕获并触发 el-tooltip

<el-tooltip content="提示信息" placement="top"><div class="wrapper"> <!-- 包装元素 --><div class="inner" style="pointer-events: none;"> <!-- 内层元素 --><!-- 内层内容 --></div></div>
</el-tooltip>


http://www.ppmy.cn/server/150084.html

相关文章

如果你想在 Android 上使用 Python 开发应用

如果你想在 Android 上使用 Python 开发应用&#xff0c;以下是一些常见的工具和框架&#xff0c;可以帮助你将 Python 与 Android 结合起来实现应用开发&#xff1a; 1. Kivy Kivy 是一个开源 Python 库&#xff0c;支持快速开发跨平台应用&#xff0c;包括 Android。Kivy 适…

vue依据下拉框选择其余信息

下拉框选择内容后&#xff0c;其余input框与该下拉框相关的内容实时回显,用change加方法 <el-row><el-col :span"12"><el-form-item label"选择站点" prop"resourcesId"><el-select v-model"form.resourcesId" …

kali黑客-利用searchsploit搜索exp一键化攻击

一、帮助手册 二、搜索的参数 2.1. 区分大小写的搜索 2.2. 精确匹配 2.3. 严格搜索 2.4.仅根据特定exp和排除指定的值 三、结果的输出方式 3.1. 以JSON格式显示结果 3.2. 允许利用标题溢出到其列中 3.3. 显示利用的完整路径 3.4. 显示更多输出信息 3.5. 显示指向地址…

计算机网络:数据链路层(三)

网课资源&#xff1a; 湖科大教书匠 1、以太网交换机 本质是一个多接口的网桥&#xff0c;执行自学习 算法 习题1 1 以太网交换机的自学习是指 A. 记录帧的源MAC地址与该帧进入交换机的端口号 B. 记录帧的目的MAC地址与该帧进入交换机的端口号 C. 记录数据包的源IP地址与…

国内首本大模型中文版书籍!复旦大学《大规模语言模型·从理论到实践》全面的一本大模型图书!

看张奇教授的主页&#xff0c;感觉这教授、博导太牛了。 在大语言模型实践和理论研究的过程中&#xff0c;他与桂韬研究员、郑锐博士生以及黄萱菁教授&#xff0c;历时 8 个月共同完成了这本书《大规模语言模型从理论到实践》&#xff01; 有需要这本《大规模语言模型从理论到实…

使用IP自签名SSL证书

最近需要创建WebSocket服务器并使用SSL证书&#xff0c;由于是内网测试&#xff0c;所以需要使用指定IP的自签SSL证书。 其实笔者前面博文 使用nexus3作为Docker镜像仓库 解决nexus3登录x509: certificate has expired or is not yet valid 中有创建过相应的证书&#xff0c;这…

安卓主板_MTK联发科android主板方案

在当前智能设备的发展中&#xff0c;安卓主板的配置灵活性和性能优化显得尤为重要。安卓主板的联发科方案&#xff0c;在芯片上&#xff0c;搭载联发科MTK6761、MT8766、MT6765、MT6762、MT8768、MT8390、MTK8370以及MT8788等型号&#xff0c;均基于64位的四核或八核架构设计。…

接口自动化框架详解(Pytest+request+Allure)

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 接口自动化是指模拟程序接口层面的自动化&#xff0c;由于接口不易变更&#xff0c;维护成本更小&#xff0c;所以深受各大公司的喜爱。 接口自动化包含2个部分&a…