Fareyle üzerine gelme (fare izninde) ne demektir?

:hover Sadece CSS kullanmanın tersini yapmanın bir yolu var mı ? Olduğu gibi: eğer :hoverolduğunu on Mouse Enter, CSS eşdeğer var on Mouse Leave?

Misal:

Liste öğelerini kullanan bir HTML menüm var. Ben öğelerden biri geldiğinizde, bir CSS renk animasyon var #999etmek black. Nasıl ters etki yaratabilir zaman bir animasyon ile fare yaprakları öğe alanı, blackiçin #999?

jsFiddle

(Sadece bu örneğe değil, :hoversorunun tam tersine yanıt vermek istediğimi unutmayın .)

Doğru anladıysam, geçişlerinizi fareyle üzerine gelme durumu yerine bağlantıya taşıyarak aynı şeyi yapabilirsiniz:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

Fareyle üzerine gelmenin tanımı şöyledir:

: Hover seçici, fareyi üzerlerine getirdiğinizde öğeleri seçmek için kullanılır.

Bu tanıma göre, üzerine gelmenin tersi, farenin üzerinde olmadığı herhangi bir noktadır . Benden çok daha akıllı biri bu makaleyi yaptı ve her iki durumda da farklı geçişler ayarladı - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Sadece kullanmak CSS geçişleri yerine animasyonların.

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

Canlı demo

CSS'de fare bırakma için açık bir özellik yoktur.

Bu etkiyi elde etmek için söz konusu öğe dışındaki tüm diğer öğelerin üzerine gelin: kullanabilirsiniz. Ama bunun ne kadar pratik olacağından emin değilim.

Bir JS / jQuery çözümüne bakmanız gerektiğini düşünüyorum.

CSS3 geçişini kullanabilirsiniz

Bazı iyi bağlantılar:

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

Buradaki cevaplar yeterli olsa da , bu konudaki W3Schools örneğinin gerçekten çok basit olduğunu düşünüyorum ((benim için) karışıklığı hemen çözdü).

:hoverFareyi üzerine getirdiğinizde bir düğmenin stilini değiştirmek için seçiciyi kullanın .

İpucu: "Fareyle üzerine gelme" efektinin hızını belirlemek için geçiş süresi özelliğini kullanın:

Misal

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

Özetle, "gir" ve "çıkış" animasyonlarının aynı olmasını istediğiniz geçişler için, geçişleri .buttonfareyle üzerine gelme seçici yerine ana seçicide kullanmanız gerekir .button:hover. "Giriş" ve "çıkış" animasyonlarının farklı olmasını istediğiniz geçişler için, farklı ana seçici ve fareyle üzerine gelme seçici geçişleri belirtmeniz gerekir.

Üzerine gelmeyen seçime süre sürenizi girin:

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}

Sadece uğraştığınız öğeye bir geçiş ekleyin. Sayfa yüklendiğinde bazı etkiler olabileceğini unutmayın. Mesela bir sınır yarıçapı değişikliği yaptıysanız, bunu dom yüklendiğinde göreceksiniz.

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

Yanlış anladınız :hover; farenin öğeye yeni girmesi yerine farenin öğenin üzerinde olduğunu söylüyor.

İstediğiniz :hoverefekti elde etmeden seçiciye animasyon ekleyebilirsiniz .

Geçişler daha iyi bir seçenektir: http://jsfiddle.net/Cvx96/

Bunun tersi :hovergörünüyor :link.

(düzenleme: teknik olarak değil bir karşıt orada 4 seçiciler, çünkü :link, :visited, :hoverve :active. Eğer eklerseniz Beş :focus.)

Örneğin .button:hover{ text-decoration:none }, bir düğmedeki alt çizgiyi kaldırmak için bir kural tanımlarken , bazı tarayıcılarda düğmeyi kaldırdığınızda alt çizgi görünür. Bunu düzelttim.button:hover, .button:link{ text-decoration:none }

Bu elbette yalnızca gerçekte bağlantı olan öğeler için işe yarar (href niteliğine sahip)

Sadece sınıfın bilgisine bir geçiş ve animasyonun adını ekleyin, sizin durumunuzda ul li a, sadece bir "geçiş" özelliği ekleyin ve tek ihtiyacınız olan bu

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>