Antworten auf deine Fragen:
Neues Thema erstellen

Hover Effect für Headerbild deaktivieren

Andimau

Nicht mehr ganz neu hier

Hallo

es geht um den Navi-Bereich der Seite
Ich habe hier eine CSS Animation auf das Navigationsmenu angelegt (bewegt sich nach rechts)

Das Headerbild links daneben (mit den drei Kirchen) ist auch von der Animation betroffen.

Gibt es einen einfachen schnellen Trick wie ich diesen Animationseffekt auf das Logo deaktivieren kann?

Danke Euch!
Andi
 

Myhar

Hat es drauf

Ein einfacher Trick: Arbeite nicht mit !important. Du weist generell jedem a-Tag diesen Effekt zu (mit important, style.css zeile 65) und kannst ihn so auch nicht wirklich einfach wieder entfernen.
!important ist in den seltensten Fällen notwendig (außer es muss wirklich ein Wert überschrieben werden, der von zB einem JS-Plugin gesetzt wird)
Um es anders zu formulieren: Du hast keine Animation auf das Navigationsmenü gelegt sondern jeden Link auf der Seite animiert, egal wo er sich befindet. Egal ob hauptbereich, footer oder im Navigationsmenü.
 

der-tim

Nicht mehr ganz neu hier

Moin,

zunächst muss ich mich Myhar anschließen - es sind sehr viele !important-Definitionen, die das einzelne Ansprechen schwierig machen. Du kannst den a-Tag mit seiner eigenen Klasse ja eigentlich separat ansprechen und ihm andere Eigenschaften geben - aber auch hier musst du dann widerum !important setzen, wenn du den Rest nicht anpasst (was ich aber auch empfehlen würde).

So bekommst du die Animation erstmal weg:
a.navbar-brand:hover, a.navbar-brand:focus, a.navbar-brand:active {
transform: unset !important;
-webkit-transform: unset !important;
}

Aber wie gesagt, versuche lieber, auf das !important in Zeile 65 zu verzichten (musst mal schauen, wo noch eine andere Definition steckt, dass du da bräuchtetst), dann müsstes du hier auch kein important setzen ...

Viele Grüße
 

Myhar

Hat es drauf

Zuerst die Varianten mit Präfix schreiben und als letztes immer die Standardvariante verwenden.
Noch besser ist natürlich autoprefixer zu verwenden, dann braucht man nur die Standardversion schreiben und der build kümmert sich um den rest.
Richtig ist also folgendes:
So bekommst du die Animation erstmal weg:
a.navbar-brand:hover, a.navbar-brand:focus, a.navbar-brand:active {
-webkit-transform: unset !important; /*zuerst Version mit Präfix*/
transform: unset !important; /*danach Standardversion*/
}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben