Bagaimana untuk Menyelesaikan Pepijat Webkit dengan :hover dan Berbilang Pemilih Adik Beradik Bersebelahan?-tutorial css-php.cn

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

DDD

Lepaskan： 2024-10-23 22:50:29

asal

135 orang telah melayarinya

How to Resolve Webkit Bug with :hover and Multiple Adjacent-Sibling Selectors?

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>

Salin selepas log masuk

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!