Apa kebalikan dari: hover (saat mouse meninggalkan)?

Apakah ada cara untuk melakukan kebalikan dari :hover hanya menggunakan CSS? Seperti: jika :hoverada on Mouse Enter, apakah ada CSS yang setara dengan on Mouse Leave?

Contoh:

Saya memiliki menu HTML menggunakan item daftar. Saat saya mengarahkan kursor ke salah satu item, ada animasi warna CSS dari #999ke black. Bagaimana saya dapat membuat efek sebaliknya saat mouse meninggalkan area item, dengan animasi dari blackke #999?

jsFiddle

(Ingatlah bahwa saya tidak ingin hanya menjawab contoh ini, tetapi seluruh masalah "kebalikan dari :hover".)

Jika saya memahaminya dengan benar, Anda dapat melakukan hal yang sama dengan memindahkan transisi Anda ke tautan daripada status hover:

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/

Definisi hover adalah:

Selektor: hover digunakan untuk memilih elemen saat Anda mengarahkan mouse di atasnya.

Dengan definisi tersebut kebalikan dari hover adalah setiap titik di mana mouse tidak berada di atasnya. Seseorang yang jauh lebih pintar dari saya telah melakukan artikel ini, mengatur transisi yang berbeda di kedua negara bagian - 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;
}

Cukup gunakan transisi CSS, bukan animasi.

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

A:hover {
    color: #000;
}

Demo langsung

Tidak ada properti eksplisit untuk meninggalkan mouse di CSS.

Anda dapat menggunakan: arahkan kursor ke semua elemen lain kecuali item yang dimaksud untuk mendapatkan efek ini. Tapi aku tidak yakin seberapa praktisnya itu.

Saya pikir Anda harus melihat solusi JS / jQuery.

Anda dapat menggunakan transisi CSS3

Beberapa tautan bagus:

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

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

Meskipun jawaban di sini cukup, saya pikir contoh W3Schools tentang masalah ini sangat mudah (ini langsung menghilangkan kebingungan (bagi saya)).

Gunakan :hoverselektor untuk mengubah gaya tombol saat Anda menggerakkan mouse ke atasnya.

Tips: Gunakan properti durasi transisi untuk menentukan kecepatan efek "hover":

Contoh

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

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

Singkatnya, untuk transisi di mana Anda ingin animasi "masuk" dan "keluar" sama, Anda perlu menggunakan transisi pada pemilih utama .buttondaripada di pemilih arahkan kursor .button:hover. Untuk transisi di mana Anda ingin animasi "masuk" dan "keluar" berbeda, Anda perlu menentukan transisi pemilih utama dan pemilih kursor yang berbeda.

Letakkan waktu durasi Anda di pilihan non-hover:

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

li a:hover {
  padding:19px;
}

Cukup tambahkan transisi ke elemen yang Anda ganggu. Ketahuilah bahwa mungkin ada beberapa efek saat halaman dimuat. Seperti jika Anda membuat perubahan radius batas, Anda akan melihatnya saat dom dimuat.

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

Anda telah salah paham :hover; dikatakan bahwa mouse berada di atas suatu item, bukan mouse baru saja memasuki item tersebut.

Anda dapat menambahkan animasi ke selektor tanpa :hovermendapatkan efek yang Anda inginkan.

Transisi adalah opsi yang lebih baik: http://jsfiddle.net/Cvx96/

Kebalikan dari :hovertampaknya :link.

(edit: tidak teknis yang berlawanan karena ada 4 pemilih :link, :visited, :hoverdan :activeFive jika Anda termasuk. :focus.)

Misalnya saat menentukan aturan .button:hover{ text-decoration:none }untuk menghapus garis bawah pada tombol, garis bawah muncul saat Anda menggulung tombol di beberapa browser. Saya sudah memperbaikinya dengan.button:hover, .button:link{ text-decoration:none }

Ini tentu saja hanya berfungsi untuk elemen yang sebenarnya merupakan tautan (memiliki atribut href)

Cukup tambahkan transisi dan nama animasi pada inicial kelas, dalam kasus Anda, ul li a, cukup tambahkan properti "transisi" dan hanya itu yang Anda butuhkan

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>