不用JS实现鼠标悬停提示框，以及Emotion里:hover使用踩坑
不写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"。
问题解决！