Bagaimana untuk Menyelesaikan Pepijat Webkit dengan :hover dan Berbilang Pemilih Adik Beradik Bersebelahan?

Pepijat Webkit dengan :hover dan Berbilang Pemilih Adik Beradik Bersebelahan

Dalam penyemak imbas seperti Safari dan Chrome, kelas pseudo :hover berfungsi dengan betul dengan pemilih adik beradik bersebelahan, seperti a:hover div. Walau bagaimanapun, pepijat timbul apabila berbilang pemilih adik beradik bersebelahan digunakan, seperti dalam div:hover a div.

Masalahnya

Dalam penyemak imbas Webkit, div:hover pemilih div tidak berfungsi, gagal untuk menggunakan penggayaan pada

elemen seperti yang diharapkan. Secara paradoksnya, menambahkan penggabung adik beradik, seperti div:hover ~ div, dengan atau tanpa penggayaan, menyelesaikan isu secara tidak jelas.

Penyelesaian

Untuk memintas pepijat Webkit ini, anda boleh menggunakan teknik yang melibatkan animasi pada elemen badan. Dengan melampirkan kelas CSS animasi pada elemen badan dengan animasi kosong, anda boleh menipu penyemak imbas dengan berkesan untuk menyelesaikan pepijat:

<code class="css">body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}</code>

Penyelesaian ini berfungsi dengan mencetuskan pemaparan semula halaman, yang memaksa Webkit untuk menyelesaikan pemilih adik beradik dengan betul. Anda boleh melihat contoh penyelesaian ini dalam tindakan pada JS Fiddle: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Pepijat Webkit dengan :hover dan Berbilang Pemilih Adik Beradik Bersebelahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn