CSS: krycie przejścia po wyjechaniu myszą?

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;
    }

Dlaczego to animuje krycie tylko wtedy, gdy najeżdżam kursorem, a nie wtedy, gdy zostawiam obiekt myszą?

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

Wcześniejsze

matowe
źródło
Używam Safari i działa idealnie nawet gdy zostawiam obiekt myszką ... Na czym polega problem?
AleVale94
Nie, nie działa dla mnie! Przejście działa, gdy najeżdżam na czerwone pole! Po opuszczeniu czerwonego pola za pomocą myszy "przeskakuje" z powrotem do pełnego krycia - chcę, aby animacja była również wyświetlana po wyjechaniu myszą!
mat
Dlaczego nie użyć filtra ... caniuse.com/#search=filter
DevWL

Odpowiedzi:

202

Stosujesz przejścia tylko do :hoverpseudoklasy, a nie do samego elementu.

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

Jeśli nie chcesz, aby przejście miało wpływ na mouse-overzdarzenie, a jedynie mouse-out, możesz wyłączyć przejścia dla :hoverstanu:

.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
źródło
2

Udało mi się znaleźć rozwiązanie za pomocą css / jQuery, z którym czuję się komfortowo. Oryginalny problem: musiałem wymusić wyświetlanie widoczności podczas animacji, ponieważ mam elementy wiszące poza tym obszarem. W ten sposób duże bloki tekstu będą teraz wisieć poza obszarem zawartości również podczas animacji.

Rozwiązaniem było rozpoczęcie głównych elementów tekstu z kryciem 0 i użycie ich addClassdo wstrzyknięcia i przejścia do krycia o wartości 1. Następnie removeClasspo ponownym kliknięciu.

Jestem pewien, że można to zrobić w całości w jQquery. Po prostu nie jestem facetem, który to robi. :)

Więc w najbardziej podstawowej formie ...

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

Dzięki za pomoc wszystkim.

Sektion66
źródło
1
$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

Sprawdź skrzypce: http://jsfiddle.net/2k3hfwo0/2/

Peter Darmis
źródło