Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript

Question

Saya perlu menukar src imej pada klik tetikus menggunakan css sahaja Suka

img:active {
}

Answer 1

Anda boleh mencapai ini dengan menggunakan atribut penggantian elemen fungsi content.

Sila ambil perhatian bahawa anda tidak boleh menyediakan mana-mana ARIA atau ciri berkaitan kebolehcapaian lain menggunakan teknologi ini, jadi maklumat yang anda sampaikan mungkin hilang ke bahagian pangkalan pengguna anda. (Ini mungkin menyalahi undang-undang bergantung pada maklumat itu, siapa anda, dan kawalan yang anda gunakan/dipasarkan).

Anda mungkin mahu menetapkan tabindex atau balut imej dalam butang untuk menjadikannya boleh diakses melalui papan kekunci/dsb.

Juga ambil perhatian bahawa :active 表示“单击时”而不是“单击后”。 CSS 没有“点击后”伪类（尽管 :focus mencukupi dalam beberapa kes).

img:active {
    content: url(http://placekitten.com/200/200);
}

<img src="http://placekitten.com/g/200/200" alt="">