Wysuwalne paski z ikonami social media z użyciem listy HTML i CSSa

Question

Cześć, mam pewien problem z CSSem, ciężko mi powiedzieć o co chodzi więc zamieszczam snippet który przedstawi problem: Link . Te zakładki mają się wysuwać po najechaniu, ale tylko jedna a nie wszystkie trzy...

Prosiłbym także o wyjaśnienie, czemu animacja wysuwania się buguje, domyślam się że chodzi o jakiś problem z pozycjonowaniem. Chciałbym aby te ikony social media zawsze znajdowały się w tej samej pozycji podczas scrollowania.

Z góry dzięki za odpowiedz 

Answer 1

Twoja animacja się buguje ponieważ pozycjonujesz div-a w którym są linki do prawej, skutkuje to tym że w momencie hoovera, elementy wewnątrz diva rozpychają diva, a więc jego szerokość się zmienia ale prawa krawędź zostaje w miejscu. Tak więc automatycznie wszystko przesuwa się w lewo.

Jak wrócę z pracy to mogę Ci to "rozpisać" w kodzie, ale do tego czasu popróbuj z position absolute dla li i position relative dla ul, do tego na hovera kombinuj z transform translateX()

I nie uzywaj do wszystkiego jednostek vh vw, bo dla malych wyswietlaczy nie bedzie nic widac :)

Comments

Było by super, bo męczę się z tym już dobrych kilka godzin :/

EDIT wstawienie float:right; w miejsce aside ul li a spowodowało "niewielkie" poprawienie wyświetlania

aside ul li a {
float: right;
}

Ale kursor czasami się buguje wyświetlanie w taki sposób: 

---

Tak na szybko, bez zbednego stylowania, jakbys nie wiedział czemu tak a nie inaczej to pisz

https://codepen.io/Wujek_Greg/pen/MXeWQO