Objektif manual ini adalah untuk meneroka cara menukar imej pada hover menggunakan CSS. Jadi, mari kita mulakan!
Apakah itu :hover dalam CSS?
The :hover ialah elemen kelas pseudo yang digunakan untuk menukar keadaan elemen HTML apabila tetikus mencetuskannya. Pemilih CSS ini digunakan terutamanya untuk menggayakan atau memilih elemen. Walau bagaimanapun, ia tidak boleh digunakan pada pautan.
Sintaks
Sintaks :hover diberikan di bawah:
unsur : berlegar {
Kod CSS. . .
}
Di sini, ' unsur ” merujuk kepada elemen di mana anda ingin menggunakan kesan hover.
Sekarang, kita akan beralih kepada contoh praktikal menukar imej pada hover menggunakan CSS.
Contoh: Bagaimana untuk Mengubah Imej pada Hover Menggunakan CSS?
Untuk menukar imej pada tuding dahulu, tambahkan dua imej dalam bahagian HTML. Imej pertama adalah untuk keadaan aktif, dan imej seterusnya adalah untuk keadaan tuding.
Langkah 1: Tambah Imej
Untuk tujuan yang dinyatakan, kami akan menambah dua imej, ' imej1 ” dan “ imej2 ”, dan berikan nama kelas kepada imej kedua sebagai “ hover_img ”.
HTML
< badan >< div kelas = 'img' >
< img src = 'imej1.png' >
< img src = 'image2.png' kelas = 'hover_img' >
< / div >
< / badan >
Langkah 2: Gaya Imej
Sekarang, beralih ke CSS untuk menetapkan kedudukan kedua-dua imej menggunakan ' kedudukan ” harta benda. Kami akan menetapkan kedudukannya sebagai ' mutlak ” untuk meletakkannya secara mutlak dengan merujuk kepada induk terdekatnya.
CSS
.img {kedudukan : mutlak ;
}
Ini akan menunjukkan hasil berikut:
Dalam langkah seterusnya, kami akan menetapkan imej kedua di hadapan yang pertama. Untuk berbuat demikian, kami akan menetapkan kedudukan imej sebagai “ mutlak ” dan tetapkan kedudukan atas dan kiri sebagai “ 0 ”. Menggunakan imej ini diletakkan di hadapan imej pertama, tetapi kami mahu memaparkan imej kedua apabila tetikus melayang di atasnya. Jadi, tetapkan nilai paparan sebagai ' tiada ” akan menunjukkan hasil yang diingini:
.hover_img {kedudukan : mutlak ;
atas : 0 ;
ditinggalkan : 0 ;
paparan : tiada ;
}
Output kod yang diberikan adalah seperti berikut:
Imej kedua berjaya disembunyikan di belakang imej pertama.
Sekarang, beralih ke langkah seterusnya.
Langkah 3: Tukar Imej pada Hover
Seterusnya, gunakan ' : berlegar ” dan pilih “ .img ” untuk menggunakan tuding pada elemen yang dipilih. Kemudian, berikan nama kelas bagi imej kedua ' .hover_img ”. Selepas itu, di dalam kurungan, tetapkan nilai sifat paparan sebagai “ dalam barisan ” yang akan memaksa elemen untuk dimuatkan dalam baris yang sama:
.img : berlegar .hover_img {paparan : dalam barisan ;
}
Berikut ialah keputusan yang menunjukkan bahawa imej diubah apabila pengguna menuding padanya:
Output yang diberikan di atas menunjukkan bahawa kami telah berjaya menukar imej pada hover menggunakan CSS.
Kesimpulan
Imej boleh ditukar pada tuding menggunakan ' : berlegar ” unsur kelas pseudo. Untuk berbuat demikian, tambahkan imej yang diperlukan dalam fail HTML, tetapkan imej tersebut pada kedudukan yang sama menggunakan CSS dan gunakan pemilih :hover padanya. Akibatnya, imej pertama akan berubah apabila tuding di atasnya. Dalam artikel ini, kami telah menerangkan cara menukar imej pada hover menggunakan :hover dengan contoh praktikal.