CSS: Übergangsopazität beim Mouse-Out?

115
.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

matt
quelle
Ich benutze Safari und es funktioniert perfekt, auch wenn ich das Objekt mit der Maus verlasse ... Was ist das Problem?
AleVale94
Nein, funktioniert bei mir nicht! Der Übergang funktioniert, wenn ich über die rote Box schwebe! Wenn Sie das rote Kästchen mit der Maus verlassen, "springt" es wieder auf die volle Deckkraft zurück - ich möchte, dass es auch beim Mouse-Out animiert wird!
Matt
Warum nicht Filter verwenden ... caniuse.com/#search=filter
DevWL

Antworten:

202

Sie wenden Übergänge nur auf die :hoverPseudoklasse und nicht auf das Element selbst an.

.item {   
  height:200px;
  width:200px;
  background:red; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item:hover {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Demo: http://jsfiddle.net/7uR8z/6/

Wenn Sie nicht möchten, dass sich der Übergang auf das mouse-overEreignis auswirkt , sondern nur mouse-out, können Sie Übergänge für den :hoverStatus deaktivieren:

.item:hover {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Demo: http://jsfiddle.net/7uR8z/3/

Sampson
quelle
2

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 addClasszu injizieren und zu einer Deckkraft von 1 removeClassü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 ...

.slideDown().addClass("load");
.slideUp().removeClass("load");

Vielen Dank für die Hilfe an alle.

Sektion66
quelle
1
$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

Überprüfen Sie die Geige: http://jsfiddle.net/2k3hfwo0/2/

Peter Darmis
quelle