Bagaimana untuk Menyelesaikan Bug Webkit :hover dan Pemilih Adik Beradik Bersebelahan?

Memahami dan Menyelesaikan Pepijat Webkit dengan :hover dan Pemilih Adik Beradik Bersebelahan

Dalam penyemak imbas Webkit (cth., Chrome, Safari), pepijat timbul apabila menggunakan :hover pseudo-class bersama beberapa pemilih adik beradik bersebelahan. Khususnya, kesan tuding tidak akan digunakan seperti yang dijangkakan apabila adik beradik ketiga bersebelahan diperkenalkan.

Contohnya:

a:hover + div {}

Kod ini berfungsi dengan sempurna. Walau bagaimanapun, menambah satu lagi pemilih adik beradik bersebelahan:

div:hover + a + div {}

Melanggar gelagat yang dimaksudkan dalam penyemak imbas Webkit.

Anehnya, jika anda menuding di atas elemen anchor dahulu dan kemudian elemen div, gaya diterapkan dengan betul. Selain itu, termasuk pemilih adik beradik ~ bersebelahan menyelesaikan isu, walaupun tiada gaya diisytiharkan:

div:hover ~ div {}

Untuk menangani pepijat ini, anda boleh melaksanakan penyelesaian dengan mensimulasikan animasi pada elemen badan:

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix { 
  from { padding: 0; } 
  to { padding: 0; } 
}

Dengan mencetuskan animasi kosong pada badan, anda boleh memintas pepijat dengan berkesan. Anda boleh mengesahkan penyelesaian di JSFiddle ini: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

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