Tujuan dari manual ini adalah untuk mengeksplorasi cara mengubah gambar saat melayang menggunakan CSS. Jadi, mari kita mulai!
Apa itu :hover di CSS?
:hover adalah elemen pseudo-class yang digunakan untuk mengubah status elemen HTML saat mouse memicunya. Pemilih CSS ini terutama digunakan untuk menata atau memilih elemen. Namun, itu tidak dapat diterapkan pada tautan.
Sintaksis
Sintaks dari :hover diberikan di bawah ini:
elemen : melayang-layang {
kode CSS. . .
}
Di Sini, ' elemen ” mengacu pada elemen di mana Anda ingin menerapkan efek hover.
Sekarang, kita akan beralih ke contoh praktis mengubah gambar saat melayang menggunakan CSS.
Contoh: Bagaimana Cara Mengubah Gambar saat Melayang Menggunakan CSS?
Untuk mengubah gambar di hover terlebih dahulu, tambahkan dua gambar di bagian HTML. Gambar pertama adalah untuk status aktif, dan yang berikutnya adalah untuk status melayang.
Langkah 1: Tambahkan Gambar
Untuk tujuan yang ditentukan, kami akan menambahkan dua gambar, “ gambar1 ' dan ' gambar2 ”, dan tetapkan nama kelas ke gambar kedua sebagai “ hover_img ”.
HTML
< tubuh >< div kelas = 'img' >
< gambar src = 'gambar1.png' >
< gambar src = 'gambar2.png' kelas = 'arahkan_img' >
< / div >
< / tubuh >
Langkah 2: Gambar Gaya
Sekarang, pindah ke CSS untuk mengatur posisi kedua gambar menggunakan “ posisi ' Properti. Kami akan mengatur posisinya sebagai “ mutlak ” untuk memposisikannya secara mutlak dengan mengacu pada induk terdekatnya.
CSS
.img {posisi : mutlak ;
}
Ini akan menunjukkan hasil berikut:
Pada langkah selanjutnya, kita akan mengatur gambar kedua di depan yang pertama. Untuk melakukannya, kita akan mengatur posisi gambar sebagai “ mutlak ” dan atur posisi atas dan kiri sebagai “ 0 ”. Menggunakan gambar ini ditempatkan di depan gambar pertama, tetapi kami ingin menampilkan gambar kedua ketika mouse melayang di atasnya. Jadi, atur nilai tampilan sebagai “ tidak ada ” akan menampilkan hasil yang diinginkan:
.hover_img {posisi : mutlak ;
atas : 0 ;
kiri : 0 ;
menampilkan : tidak ada ;
}
Output dari kode yang diberikan adalah sebagai berikut:
Gambar kedua berhasil disembunyikan di balik gambar pertama.
Sekarang, pindah ke langkah berikutnya.
Langkah 3: Ubah Gambar saat Arahkan kursor
Selanjutnya, gunakan “ : arahkan ” dan pilih “ .img ” untuk menerapkan arahkan kursor ke elemen yang dipilih. Kemudian, tetapkan nama kelas dari gambar kedua “ .hover_img ”. Setelah itu, di dalam tanda kurung, atur nilai properti tampilan sebagai “ Di barisan ” yang akan memaksa elemen agar pas di baris yang sama:
.img : melayang-layang .hover_img {menampilkan : Di barisan ;
}
Berikut adalah hasil yang menunjukkan bahwa gambar berubah saat pengguna mengarahkan kursor ke atasnya:
Output yang diberikan di atas menunjukkan bahwa kami telah berhasil mengubah gambar saat melayang menggunakan CSS.
Kesimpulan
Gambar dapat diubah saat melayang menggunakan tombol “ : arahkan ” elemen kelas semu. Untuk melakukannya, tambahkan gambar yang diperlukan dalam file HTML, atur pada posisi yang sama menggunakan CSS, dan terapkan pemilih :hover pada gambar tersebut. Akibatnya, gambar pertama akan berubah saat mengarahkan kursor ke atasnya. Pada artikel ini, kami telah menjelaskan cara mengubah gambar saat melayang menggunakan :hover dengan contoh praktis.