CSS-在另一个悬停上悬停触发器

Question

我想知道是否可能触发该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：

<div class="social-menu">
  <ul>
    <li><a href="https://www.linkedin.com/in/akhacklander/"><i class="fa fa-linkedin"></i></a></li>
  </ul>
</div>

Answer 1

如果您希望进入悬停状态的第二个元素是主要元素的子元素或兄弟元素，则可以添加一条规则来定位主要元素的悬停状态，并将与第二个元素相同的样式应用于第二个元素直接悬停在辅助元素上。

父母子女

。parent-element：hover .hovering-child，.hovering-child：hover {background-color：red; }

兄弟姐妹

。element：hover〜.sibling，.sibling：hover {background-color：red; }

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

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

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

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

Answer 2

如果我理解正确，您希望在悬停i的同时进行a的互动>

.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:nth-child(1) a:hover .fa {
    color: #ffffff;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="social-menu">
  <ul>
    <li><a href="https://www.linkedin.com/in/akhacklander/"><i class="fa fa-linkedin"></i></a></li>
  </ul>
</div>