Teammitglieder online
Regeln und nützliche Hinweise
Neueste Themen
» Profil in beiträgen nur im blog deaktivieren.von derforumde Gestern um 16:54
» [Invision] Editor über den Bildrand ziehbar + Schriftgrößenproblem
von Skouliki Mi 20 Nov 2024 - 8:06
» Passwort für meinen Adminbereich vergessen.
von Joost Sa 9 Nov 2024 - 10:13
» [Invision] Signatur wird nicht immer eingefügt
von Skouliki Mo 4 Nov 2024 - 16:33
» [Invision] Schriftgröße Navigationsleiste, Links und Forenbeschreibungen
von Skouliki So 27 Okt 2024 - 13:29
» [Invision] Transparent Logohintergrund/Struktur
von Joost So 27 Okt 2024 - 12:58
» png wird im servimg in ein jpg umgewandelt
von Skouliki Mi 23 Okt 2024 - 20:26
» Passwort Vergessen (SilentHowl)
von Joost Do 17 Okt 2024 - 17:14
» [Invision] Hintergrundbild fixieren
von Skouliki Mo 14 Okt 2024 - 11:30
» Paßwort vergessen
von Joost So 13 Okt 2024 - 17:58
» Anti-Spam-Prüfung
von Hana19 Sa 12 Okt 2024 - 16:59
» Private Nachrichten bleiben im Postausgang hängen
von Skouliki Fr 11 Okt 2024 - 11:11
» [phpBB3] Mittelteil des Forums verschoben
von Eto Mo 7 Okt 2024 - 20:50
» [phpBB3] Farbpalette ändern
von Skouliki Mo 7 Okt 2024 - 10:08
» [Klassische Version] Account löschen
von Joost Sa 5 Okt 2024 - 21:05
» Chatbox einloggen nicht möglich
von Joost So 29 Sep 2024 - 8:01
» [phpBB2] Admin Passwort nicht korrekt
von Joost Do 26 Sep 2024 - 19:20
» Grid-Layout für alle Forumversionen verfügbar
von Joost Mi 18 Sep 2024 - 16:54
Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Alastor in [Invision] Transparent Logohintergrund/Struktur ( 2 )
» Beitrag von Agorass in Passwort für meinen Adminbereich vergessen.
( 2 )
» Beitrag von Keks in [phpBB2] Unterforen Nebeneinander
( 1 )
» Beitrag von Alastor in [Invision] Schriftgröße Navigationsleiste, Links und Forenbeschreibungen
( 1 )
[phpBB2] Navigation hovern - Transition
2 verfasser
Das Forum der Foren :: Hilfe und Unterstützung :: Aussehens des Forums anpassen :: Aussehen des Forums anpassen - Archiv
Seite 1 von 1 • Teilen
[phpBB2] Navigation hovern - Transition
Hallo, ich bins wieder!
Ich habe jetzt versucht, einen Transition-Effekt einzufügen, sodass meine Navigation nicht so abrupt gehovert wird. (Transition: all 1s ease)
Ich habe das auf 2 Arten probiert, einerseits gleich in den Hover-Effekt mit dem Bild. Ausschnitt:
Andererseits ins Mainmenu allgemein:
Nichts von beidem funktioniert, es ist nach wie vor so abgehackt.
Kann mir da jemand helfen?
-Wolf
Ich habe jetzt versucht, einen Transition-Effekt einzufügen, sodass meine Navigation nicht so abrupt gehovert wird. (Transition: all 1s ease)
Ich habe das auf 2 Arten probiert, einerseits gleich in den Hover-Effekt mit dem Bild. Ausschnitt:
- Code:
#i_icon_mini_members{
background-image:url(http://i39.servimg.com/u/f39/18/67/48/40/mitgli11.png);
height:31px;
width:115px;
transition: all 1s ease;
}
#i_icon_mini_members:hover{
background-image:url(http://i39.servimg.com/u/f39/18/67/48/40/ho_mem10.png);
height:31px;
width:115px;
transition: all 1s ease;
}
Andererseits ins Mainmenu allgemein:
- Code:
.mainmenu {
text-align: left;
margin: 5px;
transition: all 1s ease;
}
.mainmenu:hover {
transition:all 1s ease;
}
Nichts von beidem funktioniert, es ist nach wie vor so abgehackt.
Kann mir da jemand helfen?
-Wolf
Zuletzt von Wolfspelz am So 24 Aug 2014 - 18:53 bearbeitet; insgesamt 1-mal bearbeitet
Wolfspelz- Geselle
- Beiträge : 52
Anmeldedatum : 19.07.14
Re: [phpBB2] Navigation hovern - Transition
Hallo,
background-image ist kein Wert, der von der transition-Eigenschaft unterstützt wird:
http://www.w3.org/TR/css3-transitions/#animatable-properties
Du kannst den Übergang zwischen zwei Hintergrundbildern desselben Elements also mit CSS nicht fließend gestalten.
Für ein weiches Überblenden zwischen zwei Bildern mit CSS müsste man zwei gleichrangige (nicht Eltern- und Kindelement) Bilder bzw. Elemente mit Hintergrundbild aufeinander positionieren und das obenliegende Element beim Hovern per transition: opacity weich ausblenden, sodass man das darunterliegende Bild/Element sieht. Das ist die einzige Möglichkeit dazu.
In der Navigation eines Forumieren-Forums ist das auch mit CSS nicht möglich, weil es dort keine zwei gleichrangigen Elemente pro Navigationsmenü gibt, sondern nur Familienelemente (pro Menü sind das 1 Elternelement .mainmenu und 1 Kindelement #i_icon_...). Damit ist dieser Effekt nicht möglich.
Liebe Grüße
Günther
background-image ist kein Wert, der von der transition-Eigenschaft unterstützt wird:
http://www.w3.org/TR/css3-transitions/#animatable-properties
Du kannst den Übergang zwischen zwei Hintergrundbildern desselben Elements also mit CSS nicht fließend gestalten.
Für ein weiches Überblenden zwischen zwei Bildern mit CSS müsste man zwei gleichrangige (nicht Eltern- und Kindelement) Bilder bzw. Elemente mit Hintergrundbild aufeinander positionieren und das obenliegende Element beim Hovern per transition: opacity weich ausblenden, sodass man das darunterliegende Bild/Element sieht. Das ist die einzige Möglichkeit dazu.
In der Navigation eines Forumieren-Forums ist das auch mit CSS nicht möglich, weil es dort keine zwei gleichrangigen Elemente pro Navigationsmenü gibt, sondern nur Familienelemente (pro Menü sind das 1 Elternelement .mainmenu und 1 Kindelement #i_icon_...). Damit ist dieser Effekt nicht möglich.
Liebe Grüße
Günther
Günther- Admin a.D.
- Beiträge : 15349
Anmeldedatum : 16.07.08
Re: [phpBB2] Navigation hovern - Transition
Okay, das ist schade.
Danke trotzdem und einen schönen Abend noch!
-Wolf
Danke trotzdem und einen schönen Abend noch!
-Wolf
Wolfspelz- Geselle
- Beiträge : 52
Anmeldedatum : 19.07.14
Re: [phpBB2] Navigation hovern - Transition
Bitte, ebenfalls schönen Abend.
-closed-
-closed-
Günther- Admin a.D.
- Beiträge : 15349
Anmeldedatum : 16.07.08
Ähnliche Themen
» [phpBB2] Navigation einzeln hovern
» [phpBB2 & phpBB3] Avatarbild dreht sich beim Hovern / Avatar Rotation
» [phpBB2] Navibar hovern
» [phpBB2] Avatar hovern
» [phpBB2] "Wer ist Online"-Bild hovern
» [phpBB2 & phpBB3] Avatarbild dreht sich beim Hovern / Avatar Rotation
» [phpBB2] Navibar hovern
» [phpBB2] Avatar hovern
» [phpBB2] "Wer ist Online"-Bild hovern
Das Forum der Foren :: Hilfe und Unterstützung :: Aussehens des Forums anpassen :: Aussehen des Forums anpassen - Archiv
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten