Mengapa Penapis Webkit Tuding Mengubah Suai Susunan Susun dan Cara Membalikkannya?

Mengapa Webkit Filter Hover Mengubah Suai Susunan Susunan

Apabila anda menggunakan penapis Webkit pada imej pada hover, anda mungkin melihat perubahan yang tidak dijangka dalam susunan susunnya. Ini disebabkan oleh penciptaan konteks tindanan oleh penapis.

Sifat penapis Webkit, apabila ditetapkan kepada nilai selain daripada tiada, mewujudkan konteks tindanan. Konteks tindanan ialah ruang tiga dimensi di mana elemen disusun mengikut susunan kemasukannya dalam pepohon dokumen atau oleh sifat indeks-z. Ini bermakna elemen dalam konteks tindanan akan sentiasa muncul di atas elemen di luar konteks.

Dalam kes anda, penapis Webkit yang digunakan pada imej mencipta konteks tindanan. Elemen imej diletakkan dalam konteks ini, manakala "kandungan slaid" DIV yang diletakkan secara mutlak berada di luar konteks. Apabila anda menuding pada imej, penapis digunakan, mencipta konteks tindanan dan menyebabkan imej disusun di atas DIV, mengaburkannya.

Menterbalikkan Kesan

Untuk mengelakkan DIV yang diletakkan secara mutlak daripada disembunyikan, anda boleh sama ada mengalih keluar penapis Webkit atau menetapkan nilainya kepada tiada pada tuding. Berikut ialah CSS yang dikemas kini:

<code class="css">li a:hover img {
  -webkit-filter: none; /* or filter: none; to remove the filter altogether */
}</code>

Ini akan melumpuhkan penapis pada tuding, membenarkan DIV dipaparkan dengan betul tanpa menggunakan pengindeksan-z.

Atas ialah kandungan terperinci Mengapa Penapis Webkit Tuding Mengubah Suai Susunan Susun dan Cara Membalikkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!