Mengapa :hover Tidak Berfungsi dengan Baik dengan Pemilih Adik Beradik Bersebelahan dalam Penyemak Imbas Webkit?-tutorial css-php.cn

Mengapa :hover Tidak Berfungsi dengan Baik dengan Pemilih Adik Beradik Bersebelahan dalam Penyemak Imbas Webkit?

Linda Hamilton

Lepaskan： 2024-10-24 02:42:29

asal

995 orang telah melayarinya

Why Doesn't :hover Work Properly with Adjacent-Sibling Selectors in Webkit Browsers?

Pepijat Webkit dengan Berbilang Pemilih Adik Beradik Bersebelahan

Dalam penyemak imbas Webkit (Safari, Chrome), isu timbul apabila menggunakan pseudo :hover -kelas dengan berbilang pemilih adik beradik bersebelahan. Kod berikut menggambarkan masalah:

div:hover + a + div {}

Salin selepas log masuk

Apabila melayang di atas

elemen, gaya tidak digunakan dengan betul. Walau bagaimanapun, jika anda menuding pada mula-mula dan kemudian

, gaya digunakan seperti yang dijangkakan.

Menambah pemilih adik beradik am, seperti:

div:hover ~ div {}

Salin selepas log masuk

tidak kira sama ada gaya diisytiharkan, menyelesaikan masalah isu.

Penyelesaian untuk pepijat Webkit ini ialah dengan memalsukan animasi pada elemen badan:

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

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

  to {
    padding: 0;
  }
}

Salin selepas log masuk

Ini boleh dilihat dalam tindakan di sini: https://jsfiddle.net/jalbertbowdenii/ ds2yY/1/.

Atas ialah kandungan terperinci Mengapa :hover Tidak Berfungsi dengan Baik dengan Pemilih Adik Beradik Bersebelahan dalam Penyemak Imbas Webkit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber：php

Artikel sebelumnya：Bagaimana untuk Membetulkan Div yang Muncul Tidak Tertib Walaupun Penggunaan Indeks z yang Betul? Artikel seterusnya：Bagaimana Anda Membalikkan Arah Teks dalam CSS?

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

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

1659

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

1813

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1541

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...