html - 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 { 背景颜色:红色; }

sibling

.element:hover ~ .sibling, .sibling:hover { 背景颜色:红色; }

根据您的情况:而不是第三个添加此

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

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

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