我对我的项目有一些基于儿童的悬停效果。
我的密码是
<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;
}
但不起作用:(
最佳答案
如果要在悬停时同时修改两个元素,则需要两个单独的: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/