不用JS实现鼠标悬停提示框,以及Emotion里:hover使用踩坑

server/2024/11/13 15:54:00/

不写onMouseEnter/onMouseLeave或者onMouseOver/onMouseOut,实现鼠标悬停提示框。Enter和Over的区别是,一个事件不冒泡,一个事件冒泡。

示例代码如下:

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.container {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 300px;margin: 50px auto;}.content {width: 250px;height: 28px;}   .showTooltip {visibility: hidden; /* 默认情况下隐藏 */display: flex;justify-content: center;align-items: center;color: black;font-weight: bold;margin-bottom: 10px;border-radius: 3px;box-shadow: 0px 2px 5px gray;   cursor: pointer;padding: 10px;}.container:hover .showTooltip {visibility: visible; /* 鼠标悬停时显示 */}</style>
</head>
<body><div class="container"><div class="showTooltip">这是Tooltip提示!</div><div class="content">鼠标hover在上面时,显示提示</div></div>
</body>
</html>

效果:

接下来说说在emotion库里使用:hover伪类的踩坑:

使用emotion我们会这么写:

const styles = {container: css({display: "flex",flexDirection: "column",justifyContent: "center",alignItems: "center",width: "300px",margin: "50px auto","&:hover .showTooltip": {visibility: "visible",},})    
}

然后在页面上使用, 以react为例:

    <div className={styles.container}><div className={styles.showTooltip}>这是Tooltip提示!</div><div className={styles.content}>鼠标hover在上面时,显示提示</div></div>

这时,我们会发现:hover 无法控制showTooltip的样式了,如果单独使用:hover是有效果的

"&:hover": {visibility: "visible",
},

说明问题出在showTooltip的类名上,因为我们用浏览器参看html的dom时会发现,所有的css类名都被转换成了类似"css-1d78smd"的名字,所以我们定义的&:hover .showTooltip就会因为找不到showTooltip这个类名而失效。

解决方法是使用cx函数,用我们定义的css类名做一个拼接:

<div className={`${cx(styles.showTooltip,"showTooltip")}`}>这是Tooltip提示!</div>

这样,最后生成的html里的class属性,就是"css-1d78smd showTooltip"。

问题解决!


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

相关文章

Unet++改进11:添加MLCA||轻量级的混合本地信道注意机制

本文内容:添加MLCA注意力机制 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 注意机制是计算机视觉中应用最广泛的组成部分之一,它可以帮助神经网络突出重要元素,抑制无关元素。然而,绝大多数通道注意机制只包含通道特征信息,忽略了空间特征信息,导致…

Linux中.NET读取excel组件,不会出现The type initializer for ‘Gdip‘ threw an exception异常

组件&#xff0c;可通过nuget安装&#xff0c;直接搜名字&#xff1a; ExcelDataReader using ConsoleAppReadFileData.Model; using ExcelDataReader; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Task…

【大模型微调】一文掌握7种大模型微调的方法_大模型如何微调

本篇文章深入分析了大型模型微调的基本理念和多样化技术&#xff0c;细致介绍了LoRA、适配器调整(Adapter Tuning)、前缀调整(Prefix Tuning)等多个微调方法。详细讨论了每一种策略的基本原则、主要优点以及适宜应用场景&#xff0c;使得读者可以依据特定的应用要求和计算资源限…

IntelliJ IDEA 使用心得与常用快捷键

刚开始学习写Java的时候&#xff0c;用的eclipse&#xff0c;正式工作后&#xff0c;主要用的myeclipse&#xff0c;去年初在前辈的推荐下&#xff0c;在2折的时候买了正版的 IntelliJ IDEA 和 Pycharm&#xff0c;12.0版终生使用&#xff0c;一年更新。 使用前早就久闻其名&am…

IntelliJ IDEA 中创建目录时 `.` 和 `/` 的区别

前言 在使用 IntelliJ IDEA 进行项目开发时&#xff0c;合理地组织项目结构对于提高开发效率至关重要。尤其是在创建多级目录时&#xff0c;正确选择分隔符能够避免很多不必要的麻烦。本文将详细介绍在 IntelliJ IDEA 中创建目录时使用 . 和 / 的区别及其应用场景。 1. 使用 …

Docker配置及简单应用

谈论/理解 Docker 的常用核心部分&#xff0c;以下皆在 Ubuntu 操作系统下进行 1 国内源安装 Docker-ce 1.1 配置 Linux 内核流量转发 因为docker和宿主机的端口映射&#xff0c;本质是内核的流量转发功能&#xff0c;所以要对其进行配置 1.1.1 未配置流量转发 如果没有配置流…

记录一次element 表格中input不可编辑的原因

场景:从子组件中把列表数据显示到表格&#xff0c;表格中的数据input不可编辑。 showCouponSelect(couponSelect) {this.benefit.couponSelect JSON.parse(JSON.stringify(couponSelect))console.log(-----showCouponSelect-------)console.log(this.benefit.couponSelect)thi…

Linux 经典面试八股文

快速鉴别十个题 1&#xff0c;你如何描述Linux文件系统的结构&#xff1f; 答案应包括对/, /etc, /var, /home, /bin, /lib, /usr, 和 /tmp等常见目录的功能和用途的描述。 2&#xff0c;在Linux中如何查看和终止正在运行的进程&#xff1f; 期望的答案应涵盖ps, top, htop, …