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

Posted 2023-03-06

【中文标题】CSS - 另一个悬停时的悬停触发器

【英文标题】：CSS - Hover trigger on another hover

【发布时间】：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' 应用时应用第三个。

【参考方案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>