Hover Effect für Headerbild deaktivieren

[Andimau]

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]

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]

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]

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*/
}