CSS: Jak neposunout prvky inline, při změně width jednoho prvku na hoveru?

11. 5. 2021 16:15:24

Ahoj,

dokázal by někdo poradit, jak vyřešit tenhle design?

Mám inline block, kde mám odkazy a před každým odkazem je šipka. Na hoveru mám animaci na zvětšení width té šipky. Problém je, že to logicky posune celou řadu.

Hover vypadá následovně (foto je z designu. V real projektu to posouvá celou řadu a vypadá to hrozně).

Napadlo mě přiřadit odkazům specifický width. Třeba 200px, aby tam byl space na to zvětšení. Pak to funguje jak potřebuji (bez posouvání ostatních), ale zase jsou jiné mezery mezy odkazy v důsledku rozdílného množství znaků viz. https://i.imgur.com/1bbxSiy.png

Dokázal by někdo poradit, jak to elegantně řešit?

11. 5. 2021 16:15:24

https://webtrh.cz/diskuse/css-jak-neposunout-prvky-inline-pri-zmene-width-jednoho-prvku-na-hoveru/#reply1483949

Pavel Mareš

(19 hodnocení)

11. 5. 2021 16:25:26

.item:hover svg { sipka + 20px }

.item:hover + .item { margin-left: -20px; }

Místo margin jde asi použít transform, nebo jiné řešení. Jde o princip.

EDIT: Když pošleš odkaz na web, tak bych sepsal kod přímo.

11. 5. 2021 16:25:26

https://webtrh.cz/diskuse/css-jak-neposunout-prvky-inline-pri-zmene-width-jednoho-prvku-na-hoveru/#reply1483948

Tomáš Marek

(23 hodnocení)

11. 5. 2021 17:00:11

Yes, to je přesně to co jsem potřeboval. Díky Ti moc.

Asi by mě to nenapadlo, už jsem uvažoval o JS, který bude brát width elementu a připočítávat těch 15px :D

S tímhle zápisem mi to funguje jak jsem potřeboval. Je tam nějaký ten pixel flickering, ale to bude asi můj fail někde v timingu animace.

11. 5. 2021 17:00:11

https://webtrh.cz/diskuse/css-jak-neposunout-prvky-inline-pri-zmene-width-jednoho-prvku-na-hoveru/#reply1483947

Pavel Mareš

(19 hodnocení)

11. 5. 2021 17:10:57

No tam bude asi něco víc hele https://jsfiddle.net/pamare/za6f13ct/4/. Nevím, musel bych to vidět a řešit přímo. S tím se pak musí dycky nějak pohrát nad konkrétníma elementama.

Řešení mě napadá celá řada - https://jsfiddle.net/pamare/028ts5e4/. Tohle je přes padding, kdy víš, že napravo máš 30px tak na hover tomu elementu dáš 20px (zvětší px té šipky).

11. 5. 2021 17:10:57

https://webtrh.cz/diskuse/css-jak-neposunout-prvky-inline-pri-zmene-width-jednoho-prvku-na-hoveru/#reply1483946

Tomáš Marek

(23 hodnocení)

11. 5. 2021 17:29:31

Kouknu na to, musím teď mimo PC. Dám pak později vědět jak jsem to vyřešil, kdyby se to někomu hodilo.

Budu muset šáhnout po jiném solution, protože jsem zapomněl na to, že odkazy jsou ve flex wrapperu s flex-wrap: wrap; a tam mi to pak posouvá i ten dolní řádek.

11. 5. 2021 17:29:31

https://webtrh.cz/diskuse/css-jak-neposunout-prvky-inline-pri-zmene-width-jednoho-prvku-na-hoveru/#reply1483945

Pavel Mareš

(19 hodnocení)

11. 5. 2021 17:40:23

No proto ten padding verze, co jsem poslal. To řeší přesně tohle :D Říkám, je to o tom, vidět jak to máš řešený, protože se přesně stane to, že tam je blok kvůli něčemu jinému.

11. 5. 2021 17:40:23

https://webtrh.cz/diskuse/css-jak-neposunout-prvky-inline-pri-zmene-width-jednoho-prvku-na-hoveru/#reply1483944

Petr Široký

(26 hodnocení)

12. 5. 2021 22:53:21

Osobně bych to řešil paddingem a šipku bych raději dal absolutní. A ještě lepší je nevymýšlet zbytečnosti, které nikdo nedocení - sám s tím mám bohaté zkušenosti, takže od jisté doby se to snažím nedělat, i když se mi to čas od času stejně daří - člověk holt chce být kreativní :)

12. 5. 2021 22:53:21

https://webtrh.cz/diskuse/css-jak-neposunout-prvky-inline-pri-zmene-width-jednoho-prvku-na-hoveru/#reply1483943

Tomáš Marek

(23 hodnocení)

13. 5. 2021 02:45:35

Mám to fixnuté. Tím marginem ani paddingem mi to prostě nešlo (jsem amatér). Problikávalo to a chovalo se to divně. Určitě byste to hned vyřešili, kdybych poslal URL, ale bohužel NDA.

Nakonec jsem to udělal jak píše Petr. Celou šipku abslute, celému wrapperu dal padding-left, aby text začínal, kde má a animuji width šipky + text přes

Ten se pak posune o těch 15px, když se šipka zvětší o 15px.

Možná to nebude nejideálnější řešení, ale funguje jak má.

13. 5. 2021 02:45:35

https://webtrh.cz/diskuse/css-jak-neposunout-prvky-inline-pri-zmene-width-jednoho-prvku-na-hoveru/#reply1483942

Pro odpověď se přihlašte.

Přihlásit