Mengapa :hover dan Berbilang Pemilih Adik Beradik Bersebelahan Menyebabkan Pepijat dalam Safari dan Chrome?

Safari dan Chrome Bug dengan :hover dan Berbilang Pemilih Adik Beradik Bersebelahan

Dalam pembangunan web, menggunakan :hover pseudo-class dan bersebelahan -pemilih adik beradik biasanya disokong oleh penyemak imbas utama seperti Safari, Chrome, Opera dan Firefox. Contohnya, kod berikut berfungsi seperti yang dimaksudkan:

a:hover + div {}

Walau bagaimanapun, apabila berbilang pemilih adik beradik bersebelahan ditambah, penyemak imbas Webkit (termasuk Safari dan Chrome) mempamerkan tingkah laku yang tidak dijangka:

div:hover + a + div {}

Dalam kes sedemikian, Webkit gagal menggunakan gaya seperti yang dijangkakan.

Penyelesaian untuk menangani pepijat ini ialah dengan menggunakan pengisytiharan gaya pada elemen badan untuk mencipta kesan animasi yang halus:

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

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

Animasi ini tidak mempunyai kesan yang boleh dilihat tetapi mencetuskan pengiraan semula gaya, membenarkan penyemak imbas Webkit menggunakan gaya pemilih :hover dan adik beradik bersebelahan.

Berikut ialah contoh untuk menunjukkan penyelesaiannya: http://jsfiddle. net/jalbertbowdenii/ds2yY/1/.

Dengan menggunakan teknik ini, anda boleh mengatasi pepijat Webkit dan memastikan tingkah laku yang konsisten merentas pelayar yang berbeza.

Atas ialah kandungan terperinci Mengapa :hover dan Berbilang Pemilih Adik Beradik Bersebelahan Menyebabkan Pepijat dalam Safari dan Chrome?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!