html - 悬停在第一个 child 身上会影响最后一个 child

Question

我的元素有一些基于 child 的悬停效果。

我的代码是

<ul>
    <li>
       <a href="">
            <i class="fa fa-facebook"></i>
            <i class="fa fa-facebook"></i>
       </a>
    </li>
<ul>

所以我的CSS是

    a i:first-child{
       position: absolute;
       top:0px;
    }

    a i:last-child{
       position: absolute;
       top:30px;
       visibility:hidden;
    }

当悬停在第一个 child 身上时，我想把它放在 top:-30px 和 visibility:hidden 上，反之亦然

我试过了

ul.socials.jump a i:first-child:hover ul.socials.jump a i:last-child{
   position: absolute;
   visibility: visible;
   top: 0%;
   transition:all .4s ease;
}

但不工作:(

Answer 1

如果你想在悬停时修改这两个元素，你将需要两个单独的 :hover 规则。

第一个 child :

ul.socials.jump a i:first-child:hover {
   visibility: hidden;
   top: -30px;
}

最后一个 child ，但要在第一个 child 悬停时定位最后一个 child ，您不需要重复选择器的第一部分 - 只需使用同级组合器:

ul.socials.jump a i:first-child:hover + i:last-child {
   visibility: visible;
   top: 0%;
}

你不需要重新声明 position: absolute，你的 transition 应该声明在 a i:first-child, a i:last-child 而不是悬停状态除非您希望过渡仅在元素离开悬停时应用。