Mengapa CSS :hover Saya Tidak Berfungsi pada Elemen SVG yang Dibenamkan dengan `` dan Bagaimana Saya Boleh Membetulkannya?

Menggayakan Elemen SVG Dibenamkan melalui menggunakan :hover CSS

Dalam kod yang anda berikan, anda cuba menggayakan elemen SVG terbenam menggunakan :hover CSS, tetapi ia tidak berfungsi untuk elemen dalam kumpulan yang dirujuk menggunakan unsur. Ini kerana, mengikut spesifikasi SVG, pemilih CSS tidak boleh digunakan pada pokok DOM yang diklonkan hasil daripada pengklonan elemen melalui .

Sokongan Firefox dan Penyelesaian

Firefox ialah satu-satunya penyemak imbas yang menyokong menangani elemen maya yang disertakan melalui lubang cacing. Walau bagaimanapun, penyemak imbas lain tidak.

Penyelesaian adalah dengan menggunakan currentColor untuk menggunakan warna yang berbeza pada elemen dengan sifat isian atau lejang apabila sifat warna elemen ditukar pada tuding. Contohnya:

#p0 {fill:currentColor}
#use1:hover {color:green}
#use2:hover {color:red}
#use3:hover {color:blue}

Alternatif Yang Mungkin

Pendekatan alternatif untuk mencapai matlamat anda ialah menggunakan JavaScript untuk mengubah suai elemen SVG pada acara tuding tetikus. Ini akan melibatkan penambahan pendengar acara pada setiap elemen dan kemudian mengemas kini atribut atau gaya elemen yang berkaitan dalam setiap kumpulan.

Memilih Penyelesaian yang Tepat

Pilihan antara penyelesaian CSS yang serasi dengan Firefox dan JavaScript pendekatan berasaskan bergantung pada sokongan pelayar dan keperluan khusus projek anda. Jika keserasian penyemak imbas adalah kritikal, gunakan kaedah JavaScript. Jika tidak, anda boleh memilih penyelesaian CSS untuk kesederhanaan dan kemudahan pelaksanaan.

Pertimbangan Lanjut

Untuk mencapai kesan tuding yang diingini pada bahagian tertentu dalam objek terbenam, anda mungkin perlu menggunakan JavaScript tambahan untuk mengubah suai atribut atau gaya elemen tertentu dalam setiap kumpulan pada tuding. JavaScript menyediakan lebih fleksibiliti untuk manipulasi elemen dinamik, membolehkan anda menyasarkan dan mengubah suai elemen individu dalam objek terbenam.

Atas ialah kandungan terperinci Mengapa CSS :hover Saya Tidak Berfungsi pada Elemen SVG yang Dibenamkan dengan `` dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!