Mengapa Elemen Berubah Saya Menjepret Kembali pada Tuding?

Mengapa Transformasi Saya Kembali?

Dalam bidang CSS, transformasi hilang yang sukar difahami boleh menjadi fenomena yang membingungkan. Di sini, kita menyelidiki contoh khusus isu ini, di mana penjelmaan elemen kelihatan berbalik selepas peralihan.

Masalah: Mengubah Elemen Snap Balik

Pertimbangkan mengikuti kod CSS:

<code class="css">.blockquote {
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

Setelah melayang di atas elemen petikan blok, kesannya adalah pelik. Walaupun peristiwa transformasi pada mulanya dicetuskan, elemen yang diterjemahkan akhirnya kembali ke kedudukan asalnya.

Punca dan Penyelesaian

Inti isu ini terletak pada "paparan" sifat CSS. Transformasi CSS biasanya tidak serasi dengan elemen yang ditetapkan untuk dipaparkan: sebaris. Oleh itu, untuk menyelesaikan masalah snap, anda perlu mengubah suai tetapan paparan untuk dipaparkan: inline-block.

Di bawah ialah kod yang dikemas kini:

<code class="css">.blockquote {
  display: inline-block;
  transition: all 250ms ease-in-out;
}

.blockquote:hover .blockquote2 {
  transform: translateX(-20px);
}

.blockquote:hover .author {
  transform: translateX(200px);
}</code>

Dengan perubahan ini, peralihan harus berfungsi seperti yang diharapkan, dan unsur-unsur akan mengekalkan kedudukannya yang berubah apabila melayang.

Atas ialah kandungan terperinci Mengapa Elemen Berubah Saya Menjepret Kembali pada Tuding?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!