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

兄弟姐妹

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

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

CSS - 悬停在另一个悬停时触发

CSS - Hover trigger on another hover

html

wordpress

element

hover