我对我的项目有一些基于儿童的悬停效果。

我的密码是

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


将鼠标悬停在第一个孩子上时,我想将其取为top:-30pxvisibility: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;
}


但不起作用:(

最佳答案

如果要在悬停时同时修改两个元素,则需要两个单独的:hover规则。

第一个孩子一个:

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


还有一个用于最后一个孩子,但要针对第一个孩子悬停的最后一个孩子,则无需重复选择器的第一部分-只需使用同级组合器即可:

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


您无需重新声明position: absolute,并且您的过渡应该在a i:first-child, a i:last-child上而不是在悬停状态下声明,除非您希望过渡仅在元素离开悬停时才适用。

关于html - 将鼠标悬停在第一个 child 上将对最后一个 child 生效,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29887416/

10-12 12:38
查看更多