Mengapakah peralihan CSS dengan mudah masuk-keluar berfungsi dengan lancar semasa tuding tetapi tiba-tiba apabila tetikus keluar?

Teka-teki Ease-In Ease-Out Transisi CSS

Apabila menggunakan peralihan kepada elemen menggunakan semua sifat dan kemudahan masuk- fungsi pelonggaran keluar, seperti yang dilihat dalam contoh biola (http://jsfiddle.net/garethweaver/Y4Buy/1/), unsur itu beralih dengan lancar apabila melayang di atasnya. Walau bagaimanapun, ia terkunci semula secara tiba-tiba apabila tetikus dimatikan. Timbul persoalan mengapa ini berlaku dan cara menyelesaikannya.

Penyelesaian terletak pada menyasarkan elemen asas dan bukannya kelas pseudo :hover untuk sifat peralihan. Dengan mentakrifkan peralihan pada elemen itu sendiri, ia digunakan semasa memasuki dan meninggalkan keadaan tuding.

Contoh Dikemas Kini

Kod CSS yang diperbetulkan:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}</code>

Dengan pengubahsuaian ini, imej kini beralih dengan lancar dalam kedua-dua arah, mereda masuk semasa tuding dan keluar apabila tetikus keluar dari kawasan imej.

Atas ialah kandungan terperinci Mengapakah peralihan CSS dengan mudah masuk-keluar berfungsi dengan lancar semasa tuding tetapi tiba-tiba apabila tetikus keluar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!