Mengapa WebKit Gagal Menggunakan Gaya :hover pada Berbilang Elemen Adik Beradik Bersebelahan?

Isu WebKit: Tuding Kelas Pseudo dengan Berbilang Pemilih Adik Beradik Bersebelahan

Pelayar web biasanya menghadapi cabaran mengendalikan kelas pseudo :hover dalam berganding dengan pemilih adik beradik bersebelahan. Khususnya, WebKit (Safari dan Chrome) menghadapi kesukaran apabila menggunakan gaya :tuding pada siri elemen adik beradik bersebelahan.

Cabaran:

Contoh berikut menunjukkan isu tersebut :

div:hover + a + div { /* styles here */ }

Dalam kes ini, WebKit gagal menggunakan gaya pada div kedua apabila tetikus melayang di atasnya secara langsung. Walau bagaimanapun, jika tetikus melayang di atas elemen penambat sebelumnya dahulu dan kemudian menuding di atas div kedua, gaya digunakan seperti yang diharapkan.

Penyelesaian:

Penyelesaian untuk pepijat ini melibatkan animasi palsu pada elemen badan:

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

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

Penyelesaian ini memperkenalkan animasi remeh yang memaksa WebKit untuk memaparkan semula elemen badan, sekali gus menyelesaikan isu dengan kelas pseudo hover dan berbilang adik beradik bersebelahan pemilih.

Atas ialah kandungan terperinci Mengapa WebKit Gagal Menggunakan Gaya :hover pada Berbilang Elemen Adik Beradik Bersebelahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!