Apa kebalikan dari: hover (saat mouse meninggalkan)?


115

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".)


Apa sebenarnya yang coba Anda lakukan? Mungkin ada alternatif lain?
Moin Zaman

14
Kebalikan dari :hovercukup sederhana :not(:hover); Namun, :hoverini tidak identik dengan onmouseenterjuga tidak :not(:hover)sama dengan onmouseleave. CSS tidak memiliki konsep peristiwa DOM.
BoltClock

1
@Cthulhu: :hoverberarti "elemen yang memiliki penunjuk mouse di atasnya". Ini tidak menunjukkan jika penunjuk mouse dialihkan dari elemen lain ke elemen ini. Ini hanya berarti bahwa penunjuk mouse saat ini berada di elemen.
BoltClock

1
@ BoltClock akan: tidak (: hover) benar-benar melakukan sesuatu yang dipicu sama sekali?
Moin Zaman

5
@Moin Zaman: Ya. Selama mouse Anda tidak berada di atas elemen tertentu, maka :not(:hover)akan diterapkan. Ini demo: jsfiddle.net/BoltClock/rghBX
BoltClock

Jawaban:


93

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

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

1
@Cthulhu - Saya telah mengedit jawaban saya sekarang. Itu mungkin sedikit membantu. Saya pikir itu jawaban yang terlalu jelas.
SpaceBeers

1 untuk mengarahkan saya ke arah yang benar. Saya mengalami perbedaan animasi antar browser. Chrome membuat semuanya lebih lancar tetapi saya memiliki .1s yang berbeda dalam transisi dan Mozilla dan IE sama-sama menampilkan kesalahan. Saya dapat memperbaikinya dengan mencocokkan nomor transisi saya.
Termato

Ugh. 'Definisi' yang :hoverAnda kutip berasal dari W3Schools, yang sama sekali bukan sumber yang berwibawa. Spesifikasi sebenarnya dapat ditemukan di w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes , meskipun itu bukan penjelasan yang paling dapat diakses.
Mark Amery

22

Cukup gunakan transisi CSS, bukan animasi.

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

A:hover {
    color: #000;
}

Demo langsung


Seperti yang saya katakan di contoh, masalah saya bukan dengan animasinya, tetapi dengan bagian "saat meninggalkan mouse".
Cthulhu

5
Transisi berfungsi baik saat mouse di atas maupun di kiri mouse. Itu cukup untuk menentukan gaya untuk keadaan dan keadaan normal :hover.
Marat Tanalin

5

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.


JS tidak diperlukan dalam kasus ini, dan sekarang saya akan mencegahnya, meskipun alasan kinerja.
Alex Chamberlain

Ini tidak diperlukan untuk contoh di atas, tetapi tampaknya ini adalah solusi terbaik untuk seluruh masalah "cuti mouse".
Cthulhu


1

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.


1

Letakkan waktu durasi Anda di pilihan non-hover:

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

li a:hover {
  padding:19px;
}

1

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


0

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/


1
Biola Anda tidak memberikan hasil yang diinginkan.
Govind Rai

0

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)


Informasi Anda salah. :linkcukup pilih tautan, sesederhana itu. Lihat di sini definisi :link: developer.mozilla.org/en-US/docs/Web/CSS/%3Alink
Cthulhu

@ Strive55 Ahhh, terima kasih, itu masuk akal. Tautan yang Anda berikan menyatakan bahwa "Untuk menata gaya tautan dengan tepat, Anda harus meletakkan aturan: tautan sebelum yang lain, seperti yang didefinisikan oleh LVHA-order:: link -: visiting -: hover -: active." Jika saya memahaminya dengan benar, itu berarti bahwa jika tidak ada penyeleksi lain yang berlaku (: dikunjungi,: hover, atau: aktif) maka: tautan adalah yang berlaku. Secara teknis bukan sebaliknya, karena ada 4, tetapi masih berfungsi
scripter

0

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.