Html CSS-另一个悬停上的悬停触发器

我想知道是否有可能触发此css中的最后一个悬停和第二个悬停：

.social-menu ul li a:hover {
    transform: rotate(0deg) skew(0deg) translate(0, -10px);
}

.social-menu ul li:nth-child(1) a:hover {
    background-color: #007bb5;
}

.social-menu ul li .fa:hover {
    color: #ffffff;
}

我注意到第三次悬停是在一个相当小的区域触发的，导致

而不是

HTML:

如果要置于悬停状态的第二个元素是主元素的子元素或同级元素，则可以添加一条规则以针对主元素的悬停状态，并将与直接悬停在辅助元素上相同的样式应用于第二个元素

父子关系

.parent元素：悬停。悬停子元素， .悬停子对象：悬停{背景颜色：红色；}

兄弟姐妹

.element:hover~.sibling， .sibling:悬停{背景色：红色；}

在您的情况下：添加此项，而不是第三项

.social-menu ul li a:hover .fa {
    color: #ffffff;
}

如果只想影响列表中的第一项：

.social-menu ul li:nth-child(1) a:hover .fa {
    color: #ffffff;
}

---

如果我理解正确，您希望在悬停

a

时与

I

交互

。社交菜单ul li a：悬停{
变换：旋转（0度）倾斜（0度）平移（0，-10px）；
}
.社交菜单ul li:第n个孩子（1）a:悬停{
背景色：#007bb5；
}
社交菜单ulli:n个孩子（1）a:hover.fa{
颜色：#ffffff；
}

那么你的意思是第二个是打败其他人吗？@fadiomar我希望第三个在“社交菜单”ul li:nth child（1）a:hover”适用时适用。

.social-menu ul li:nth-child(1) a:hover .fa {
    color: #ffffff;
}