CSS - 另一个悬停时的悬停触发器答案

【问题标题】：CSS - Hover trigger on another hoverCSS - 另一个悬停时的悬停触发器
【发布时间】：2020-08-27 14:14:39
【问题描述】：

我想知道是否可以触发这个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>

【问题讨论】：

那么你的意思是第二个是打败别人的？
@fadiomar 好吧，我希望在 '.social-menu ul li:nth-child(1) a:hover' 应用时应用第三个。

标签： html css wordpress hover element

【解决方案1】：

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

亲子

.parent-element:hover .hovering-child, .hovering-child:hover { 背景色:红色; }

兄弟姐妹

.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;
}

【讨论】：

【解决方案2】：

如果我理解正确，您希望在悬停a 时与i 互动

.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>

【讨论】：