不写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"。
问题解决！