|
|||
[gelöst] Lavalamp-Effekt funktioniert nicht, wenn letzter Menüpunkt "aktiv" ist
Hallo zusammen,
seit einigen Tagen bin ich auf der Fehlersuche eines banalen Problems. Weshalb funktioniert denn hier der "Lavalamp"-Effekt unter dem Menü nicht mehr, sobald der letzte Menüpunkt ("Unterstützen") aktiv ist? Wähle ich einen anderen Menüpunkt aus, dann funktioniert wieder alles wie gewohnt. Ich schätze, dass ich irgendwo noch einen Denkfehler mit der strong.active-Klasse habe. Das zugehörige CSS: Code:
#navigation ul { position:relative; width:50em; margin:0 auto; padding:0; white-space:nowrap; display: flex ; } ul li { display:inline-block; text-align:center; } ul li a, ul li a:hover, ul li a:focus, ul li strong.active { position:relative; top:0;left:0;right:0;bottom:0; display:inline-block; box-sizing:border-box; font-weight:normal; width:10em; /*Transition*/ -webkit-transition:width .3s,right .3s; -moz-transition:width .3s,right .3s; -o-transition:width .3s,right .3s; transition:width .3s,right .3s; } ul li:nth-child(1) a {width:10em;} ul li:nth-child(2) a {width:10em;} ul li:nth-child(3) a {width:10em;} ul li:nth-child(4) a {width:10em;} ul li:nth-child(5) a {width:10em;} ul li:last-child a::after { content:""; position:absolute; right:inherit; bottom:-3px; width:inherit; height:3px; pointer-events:none; /*transition*/ -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; } ul li:nth-child(1) ~ li:last-child a {right:40em;width:10em;} ul li:nth-child(2):hover ~ li:last-child a {right:30em;width:10em;} ul li:nth-child(3):hover ~ li:last-child a {right:20em;width:10em;} ul li:nth-child(4):hover ~ li:last-child a {right:10em;width:10em;} ul li:nth-child(5):last-child:hover a {right:0;width:10em;} ul li:hover ~ li:last-child a::after, ul li:last-child:hover a::after {background:#c351fa;} ul li:last-child a {min-width:10em;max-width:10em;} ul li a:hover, ul li a:focus, { color:#c351fa; background-color:rgba(255,255,255,1); /*transition*/ -webkit-transition:width .3s,right .3s,background-color .3s; -moz-transition:width .3s,right .3s,background-color .3s; -o-transition:width .3s,right .3s,background-color .3s; transition:width .3s,right .3s,background-color .3s; } Es funktioniert ja soweit alles problemlos - lediglich bei aktivem letztem Menüpunkt funktioniert die Lavalamp nicht mehr, sobald man über das Menü hovert. Geändert von Traginho (03.05.2021 um 19:30 Uhr) Grund: Frage wurde beantwortet |
Sponsored Links |
|
|||
Vielen Dank für Deinen Hinweis!
Verzeihung, seit gestern Abend heißt dieser Menüpunkt nun "Unterstützen" anstelle von "Mitmachen". |
|
|||
Dein animierter Balken wird mit "::after" vom Link im letzten Listenelement erzeugt. Bist du auf der letzten Seite, hast du dort nur noch ein "strong" und kein "a".
Wenn du dort dein "a" durch "> *" ersetzt, funktioniert es wieder: Code:
#navigation #navigationsmodul ul li:last-child > *::after { content:""; position:absolute; right:inherit; bottom:-3px; width:inherit; height:3px; pointer-events:none; /*transition*/ -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; } #navigation #navigationsmodul ul li:nth-child(1) ~ li:last-child > * {right:40em;width:10em;} #navigation #navigationsmodul ul li:nth-child(2):hover ~ li:last-child > * {right:30em;width:10em;} #navigation #navigationsmodul ul li:nth-child(3):hover ~ li:last-child > * {right:20em;width:10em;} #navigation #navigationsmodul ul li:nth-child(4):hover ~ li:last-child > * {right:10em;width:10em;} #navigation #navigationsmodul ul li:nth-child(5):last-child:hover > * {right:0;width:10em;} #navigation #navigationsmodul ul li:hover ~ li:last-child > *::after, #navigation #navigationsmodul ul li:last-child:hover > *::after {background:#c351fa;} |
|
|||
Zitat:
|
Stichwörter |
animation, animationen, css, effekt, lavalamp, menü, menue, slider |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hoover effekt funktioniert nicht | joni8a | CSS | 3 | 09.03.2013 14:54 |