.item:hover {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
}
Warum animiert dies nur die Deckkraft, wenn ich mit der Maus darüber schwebe, aber nicht, wenn ich das Objekt mit der Maus verlasse?
Demo hier: http://jsfiddle.net/7uR8z/
Wenn Sie
css
css-transitions
matt
quelle
quelle
Antworten:
Sie wenden Übergänge nur auf die
:hover
Pseudoklasse und nicht auf das Element selbst an.Demo: http://jsfiddle.net/7uR8z/6/
Wenn Sie nicht möchten, dass sich der Übergang auf das
mouse-over
Ereignis auswirkt , sondern nurmouse-out
, können Sie Übergänge für den:hover
Status deaktivieren:Demo: http://jsfiddle.net/7uR8z/3/
quelle
Ich habe es geschafft, mit css / jQuery eine Lösung zu finden, mit der ich vertraut bin. Das ursprüngliche Problem: Ich musste erzwingen, dass die Sichtbarkeit während der Animation angezeigt wird, da Elemente außerhalb des Bereichs hängen. Dabei hängen große Textblöcke jetzt auch während der Animation außerhalb des Inhaltsbereichs.
Die Lösung bestand darin, die Haupttextelemente mit einer Deckkraft von 0 zu starten und
addClass
zu injizieren und zu einer Deckkraft von 1removeClass
überzugehen. Dann, wenn erneut darauf geklickt wird.Ich bin sicher, es gibt eine Möglichkeit, dies mit jQquery zu tun. Ich bin einfach nicht der Typ, der das macht. :) :)
Also in seiner einfachsten Form ...
Vielen Dank für die Hilfe an alle.
quelle
Überprüfen Sie die Geige: http://jsfiddle.net/2k3hfwo0/2/
quelle