CSS - Übergang funktioniert nicht

Hallo, ich bin derzeit versuchen zu tun, ein übergang, wenn Sie mit dem hintergrund wird lila und die text-Farbe weiß.(ursprünglich, es gibt keine hintergrund-Farbe und text-Farbe ist schwarz...)

Aber dann funktioniert es nicht!

Was ist es, was Im tun falsch!?

a:hover {
    color: white;
    -webkit-transition: color 1000ms linear;
    -moz-transition: color 1000ms linear;
    -o-transition: color 1000ms linear;
    -ms-transition: color 1000ms linear;
    transition: color 1000ms linear;
    background-color: purple;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

Also///EDIT wie jeder erzählt mir immer wieder hinzufügen, dass es auf a anstelle von a:hover...

Ausgangszustand:

text-color:black;
background:none;

Hovered:

Reibungslosen Übergang zu:

 text-color:white;
background:black;

Ich hoffe das hilft jeden aus
Vielen Dank für Ihre Zeit!

  • Es scheint zu funktionieren hier. jsfiddle.net/4zhnP ... wolltest du so etwas? jsfiddle.net/pySY4
  • Es wäre einfacher, wenn Sie enthalten einige html. Möglicherweise müssen Sie etwas tun, wie .header > .navlinks > li > a:hover
  • ja sowas aber glatter!
InformationsquelleAutor user2766367 | 2013-10-14
  1. 6

    Legte Sie auf das eine (nicht hover) UND wenn Sie wollen, mehrere übergänge, die Sie haben zu erklären, Sie zusammen.

    -webkit-transition: color 1000ms linear, background-color 1000ms linear;

    http://jsfiddle.net/4zhnP/1/

    • Vielen Dank, Ihre Beschreibung und Ihre Lösung klare,prägnante Informationen, warum und wie es zu tun. 😀
    InformationsquelleAutor Moob
  2. 4

    Nicht, stellen Sie den übergang auf die :hover-Eigenschaft.

    a {
color: white;
-webkit-transition: color 1000ms linear;
-moz-transition: color 1000ms linear;
-o-transition: color 1000ms linear;
-ms-transition: color 1000ms linear;
transition: color 1000ms linear;
background-color: purple;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}

    Dann einstellen, was eigentlich Veränderung an der :hover Eigenschaft.
    Zum Beispiel, 

    a:hover{
color:green;
}
    • Ok, also Wenn ich wollte zunächst die text-Farbe auf schwarz, und ohne hintergrund, und sobald Sie den Mauszeiger beginnt der übergang zum hintergrund Farbe lila und text-Farbe weiß, wie Sie wäre?
    • Sie hätte so etwas wie dieses: a:hover{background:purple;color:white;}
    InformationsquelleAutor Dan Johnson
  3. 1

    Sollten Sie versuchen, die übergänge auf der a statt der a:hover.

    Weitere Informationen finden Sie auf übergänge hier: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

    • Warum würden Sie empfehlen?
    InformationsquelleAutor vanev_
Schreibe einen Kommentar