我的代码是

<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:-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规则。

第一个孩子的一个：

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上宣布，而不是在悬停状态上宣布，除非您希望转换为仅在元素离开悬停时才适用。

Answer 2

实际上，悬停在锚标签上的效果更好。

inline-block

它更清晰，即使孩子们的位置变化，悬停也更有可能保持活跃。

如果您在链接中添加了一个类并将其显示设置为a.hoverchild { display:inline-block }，例如

，这也会有所帮助

:hover

这导致链接中的“空白”空间也可以移动，因此当孩子们移动时，光标（仍在链接的块内）仍然保持float:left活动。

如果您正在尝试执行我认为您正在尝试的操作，那么您最好使用a.hoverchild { display:inline-block; } a.hoverchild:hover i { position:relative; float:left; clear:left; visibility:visible; }这样做：

subview!.transform = CGAffineTransformMakeScale(0.6, 0.6)

这是一个std::to_string来演示。

Answer 3

您好我认为您可以在css中使用兄弟选项使用＆＃34;〜＆＃34;签署解决这个问题。

请查看JSfiddle以查看您的要求

徘徊在第一个孩子身上将对最后一个孩子生效

我的代码是

所以我的css是

我试过

3 个答案: