hovering on first child will take effect on last child - html

Question

i have some child based hovering effect on my project.
My codes are
<ul>
<li>
<a href="">
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook"></i>
</a>
</li>
<ul>
so my css are
a i:first-child{
position: absolute;
top:0px;
}
a i:last-child{
position: absolute;
top:30px;
visibility:hidden;
}
when hovering on first child i want to take it top:-30px and visibility:hidden and last child to vice-versa
I have tried
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;
}
but not working :(

Answer 1

If you want to modify both elements on hover, you will need two separate :hover rules.
One for the first child:
ul.socials.jump a i:first-child:hover {
visibility: hidden;
top: -30px;
}
And one for the last child, but to target the last child on first child hover, you don't need to repeat the first portion of your selector — just use a sibling combinator:
ul.socials.jump a i:first-child:hover + i:last-child {
visibility: visible;
top: 0%;
}
You don't need to redeclare position: absolute, and your transition ought to be declared on a i:first-child, a i:last-child and not on the hover state unless you expect the transition to only apply when the elements leave hover.

Answer 2

Actually, the hover is better served on the anchor tag.
a:hover i:first-child {
position:relative;
top:-30px;
}
a:hover i:last-child {
visibility:visible;
}
It's much more legible, and the hover is more likely to stay active even with the shifting position of the children.
It would also help if you added a class to the link and set its display to inline-block, such as
a.hoverchild { display:inline-block }
That causes the 'blank' space inside the link to be hoverable as well, so that when the children move, the cursor (being inside the link's block, still) is still keeping the :hover active.
If you're trying to do what I think you're trying to do, you might actually be better off using float:left like this:
a.hoverchild {
display:inline-block;
}
a.hoverchild:hover i {
position:relative;
float:left;
clear:left;
visibility:visible;
}
Here's a fiddle to demonstrate.

Answer 3

Hello i think you can use sibling option in css using "~" sign to solve this problem.
Check out following JSfiddle to see your requirement