CSS: Übergang Opazität bei Mouse-Out?

.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 den Mauszeiger halte, aber nicht, wenn ich das Objekt mit der Maus verlasse?CSS: Übergang Opazität bei Mouse-Out?

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

Quelle

2012-05-12 matt

I Safari verwenden und es funktioniert auch perfekt, wenn ich das Objekt mit der Maus verlassen ... Was ist das Problem? – AleVale94

Nein, funktioniert nicht für mich! Der Übergang funktioniert, wenn ich die rote Box schwebe! Wenn Sie die rote Box mit der Maus verlassen, "springt" sie zurück zur vollen Deckkraft - ich möchte, dass sie auch bei Mouse-Out animiert wird! – matt

Warum nicht Filter verwenden ... http://caniuse.com/#search=filter – DevWL

159

Sie sich Übergänge nur auf die :hover Pseudo-Klasse, und nicht auf das Element angewendet wird.

.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 den Übergang nicht wollen, das mouse-over Ereignis beeinflussen, sondern nur mouse-out, können Sie Übergänge drehen für den :hover Zustand aus:

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

Quelle

2012-05-12 16:57:15 Sampson

übrigens war ich mit diesem in FIREFOX unt il i realisiert man einen Tippfehler im Wort Opazität haben:

-moz-transition: opactiy .15s ease-in-out;

-moz-transition: opacity .15s ease-in-out;

Quelle

2012-05-12 17:07:31 Sliq

Ich habe die Frage bearbeitet, um diesen Tippfehler zu korrigieren. –

(übrigens sollten Sie die Frage bearbeitet oder kommentiert haben, anstatt eine Antwort zu geben.) –

@ törzsmókus Ja, aber als ich diese Antwort gab, hatte ich nicht den Ruf, Fragen zu bearbeiten, denke ich. – Sliq

I CSS/jQuery eine Lösung finden verwaltet werden muss, dass ich mit bequemen bin. Das ursprüngliche Problem: Ich musste die Sichtbarkeit beim Animieren erzwingen, da ich Elemente außerhalb des Bereichs habe. Wenn Sie dies tun, werden große Textblöcke auch während der Animation außerhalb des Inhaltsbereichs angezeigt.

Die Lösung war, die Haupttextelemente mit einer Opazität von 0 zu starten und addClass zu injizieren und zu einer Opazität von 1 zu wechseln. Dann removeClass, wenn erneut geklickt wurde.

Ich bin sicher, es gibt eine all jQquery Möglichkeit, dies zu tun. Ich bin einfach nicht der Typ, der das macht. :)

So in seiner einfachsten Form ...

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

Danke für die Hilfe jeder.

Quelle

2013-05-17 15:02:28 Sektion66

$(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/

Quelle

2015-01-11 17:49:13

CSS: Übergang Opazität bei Mouse-Out?

Antwort

Verwandte Themen