如何在鼠标悬停Li2元素时同时触发两个hover类样式？

嘿，这个需求其实很简单，不用额外写JavaScript，靠CSS就能完美搞定！核心就是利用CSS的父元素hover状态控制子元素样式的特性，具体操作如下：

调整你的CSS样式 #

把你原来的两个hover类修改成下面这样：

/* 悬停Li2时的自身样式 */
.Li2:hover {
  background-color: white;
  border-color: white;
}

/* 当Li2被悬停时，控制内部Link2的样式 */
.Li2:hover .Link2 {
  color: black;
}

为什么这样有效？ #

原来的.Link2:hover只有在鼠标直接悬停在<Link>元素上时才会生效，但我们需要的是鼠标覆盖整个<li className="Li2">区域时，同时触发Li2的背景/边框变化和Link2的文字变色。

上面的修改中，.Li2:hover .Link2这个选择器的意思是：当.Li2元素处于hover状态时，选中它内部的所有.Link2子元素，并应用color:black的样式。这样只要鼠标碰到Li2的任何区域，两个样式就会同时生效啦！

额外提示 #

如果你还想保留“直接悬停Link2时也变色”的效果，可以保留原来的.Link2:hover规则，两者不会冲突：

/* 可选：保留直接悬停链接时的效果 */
.Link2:hover {
  color: black;
}

你的JSX代码完全不需要修改，类名的应用是正确的，只需要更新CSS就可以实现需求啦！

内容的提问来源于stack exchange，提问作者Pawan