Mengapa :hover Tidak Berfungsi pada Elemen SVG dan Apakah Alternatifnya?

Elemen PENGGUNAAN SVG dan Gaya :hover – Isu Sokongan Penyemak Imbas

Apabila cuba menggunakan gaya :hover pada elemen SVG yang dibenamkan melalui < defs> menggunakan , sesetengah penyemak imbas mungkin menghadapi had.

Had Sokongan Penyemak Imbas

Spesifikasi SVG dengan jelas menyatakan bahawa pemilih CSS2 tidak boleh digunakan pada DOM yang diklon secara konsep pokok unsur yang dirujuk oleh . Ini bermakna :hover tidak boleh digunakan untuk menyasarkan elemen tertentu dalam objek terbenam.

Pengecualian Firefox

Firefox menonjol sebagai pengecualian, menyokong pengalamatan "maya " elemen disertakan melalui lubang cacing. Walau bagaimanapun, penyemak imbas lain tidak berkongsi keupayaan ini.

Pendekatan Alternatif Menggunakan Warna semasa

Daripada bergantung pada :hover, pendekatan yang lebih disokong secara meluas adalah dengan menetapkan rujukan nilai isian atau lejang elemen kepada currentColor. Dengan mengubah suai sifat warna elemen pada tuding, isian atau warna strok elemen yang dirujuk berubah dengan sewajarnya.

Berikut ialah contoh:

<svg version="1.1" width="640" height="480"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <style type="text/css">
    #p0 {fill:currentColor}
    #use1:hover {color:green}
    #use2:hover {color:red}
    #use3:hover {color:blue}
  </style>

  <defs>
    <polygon>

Dengan menggunakan teknik ini, anda boleh menukar warna isian atau lejang SVG terbenam dengan berkesan elemen apabila elemen dilegarkan, sekali gus meniru kesan :hover pada elemen ini.

Atas ialah kandungan terperinci Mengapa :hover Tidak Berfungsi pada Elemen SVG dan Apakah Alternatifnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!