Css3

[Lefori]

Moin leute,

ich habe ein menü in wordpress und habe die li mit einem hover und transition belegt.
Mein Problem ist das sich durch den transition effekt die schrift sich auch ändert kann man da abhilfe schaffen?

hier der code:

.menu-footer-container li{
list-style-type: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
line-height: 30px;
padding-left:5px;
}

.menu-footer-container li:hover{background-color: #7ab51d; opacity: 0.6;
-webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -o-transition: all 0.4s linear; -ms-transition: all 0.4s linear; transition: all 0.4s linear;
}


lg
Lefori

 

[siebling]

Die Kind-Elemente des <li> werden immer die Transparenz miterben. Wenn du ohne Animation leben kannst, bietet sich daher eine Transparenz der Hintergrundfarbe per RGBA an: http://www.perun.net/2010/08/13/css3-und-die-durchsichtigkeit-opacity-vs-rgba/

Durch den Einsatz von jQuery kann man hier sicherlich auch noch eine Animation hinbekommen, nur mit CSS aber leider nicht, da RGBA-Transparenz so nicht animiert werden kann.

 

[Knalltuete]

Warum sollte sich transparente Hintergrundfarbe nicht animieren lassen, siehe http://jsfiddle.net/Mgn3G/.

Die Transparenz der Schrift kommt jedenfalls durch das opacity, da damit das ganze Element eine Transparenz bekommt.

 

[Lefori]

habe mich von dem footer menü von https://internet-media.com/de inspirieren lassen wurde das hier nicht auch so umgesetzt?

 

[siebling]

Warum sollte sich transparente Hintergrundfarbe nicht animieren lassen, siehe http://jsfiddle.net/Mgn3G/.

Die Transparenz der Schrift kommt jedenfalls durch das opacity, da damit das ganze Element eine Transparenz bekommt.

Ah, danke für die Berichtigung. Hatte irgendwie in Erinnerung, dass der Punkt nicht animierbar war.

 

[Knalltuete]

Kein Ding! Das geht mir manchmal auch so

habe mich von dem footer menü von https://internet-media.com/de inspirieren lassen wurde das hier nicht auch so umgesetzt?

Da wurde es auch mit einer Hintergrundfarbe mit RGBA Wert umgesetzt

 

[Lefori]

thx ... firebug wollte bei mir nicht so richitg ^^

 

[Daaron]

Firebug stinkt. Nimm Chrome und verwende das integrierte Entwickler-Werkzeug. Als professioneller Webdeveloper kann ich dir nur sagen: das ist allem, was man mit Firefox+Plugins anstellen kann, um Lichtjahre voraus.