SORU
12 Mayıs 2012, CUMARTESİ


CSS: fare-geçiş opaklık?

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

Bunu neden sadece ben hover yaparken opaklık animasyon ama nesne gidince fare ile değil mi?

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

CEVAP
12 Mayıs 2012, CUMARTESİ


Sadece elemanın kendisi için :hover sözde sınıf, ve geçişler uygulamak.

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

Eğer geçiş mouse-over olay etkisi istemesen bile, ama sadece mouse-out geçişler :hover devlet için kapatabilirsiniz :

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • AginoEvolutionHD

    AginoEvoluti

    27 AĞUSTOS 2011
  • infodirt

    infodirt

    11 Mart 2009
  • stokelycalm

    stokelycalm

    28 Aralık 2010