Cascading Style Sheets (CSS) dirancang menggunakan atau format XML (termasuk XHTML, SVG). Ini adalah bahasa style sheet yang terutama digunakan untuk mendeskripsikan elemen melalui serangkaian metode pemformatan yang beragam. Salah satu metodenya adalah hovering dan dalam artikel ini, kita akan memahami Hover di CSS dengan cara berikut:

• Apa itu Hover di CSS?
• Di mana Hover Digunakan?
• Apa yang dilakukan Hover?
• Kesesuaian
• Bagaimana cara kerjanya?
• Arahkan Perubahan Warna Latar Belakang Menjadi 'Merah'
• Membuat Hover Opacity pada Gambar
• Membuat Text Overlay pada Gambar

Apa itu Hover di CSS?

CSS hover adalah komponen pemilih yang digunakan untuk mengatur gaya elemen yang berbeda saat penunjuk mouse mengarahkan kursor ke elemen tersebut. Mereka dapat digunakan di hampir setiap elemen HTML. Fitur hover di CSS sangat penting dalam mendesain halaman web.

Komponen hover dapat menyorot, menyandikan dan menyesuaikan halaman web sesuai preferensi pengguna dalam program desain web yang ringkas dan efektif.

Di mana Hover Digunakan?

Contoh paling umum dari kelayakan fitur hover dapat disorot di situs web belanja besar seperti Flipkart dan Amazon. Saat pengguna mengarahkan kursor ke produk apa pun di situs web e-niaga ini, produk diprogram untuk melakukan fungsi zoom hover otomatis untuk memberi pelanggan tampilan yang lebih baik tentang produk pilihan mereka. Melalui pemrograman ini, halaman web dirancang untuk menampilkan tampilan ringkas dari seluruh rangkaian produk disertai dengan tampilan detail produk yang diminati dalam satu desain halaman web.

Apa yang dilakukan Hover?

Hover adalah alat pemrograman multi-fungsi di mana pengguna dapat menyesuaikan elemen target dengan kriteria pemformatan yang tak terbatas. Beberapa contoh dari pengetahuan operasional fitur hover meliputi:

• Mengubah Latar Belakang / Warna Font
• Menyematkan Teks Tersembunyi Yang Ditampilkan di Hover
• Buat Efek Rollover pada Gambar
• Zoom Otomatis pada Teks / Gambar
• Ubah Opasitas Gambar
• Penyematan Teks
• Image Swap
• Div. Arahkan kursor
• Beberapa Operasi Pemformatan Hover CSS Lainnya.

Efek hover pada dasarnya mengubah nilai properti suatu elemen untuk mengaktifkan perubahan animasi pada teks / gambar yang dinyatakan atau elemen terkait. Penyematan elemen CSS hover dalam desain halaman web mengubah halaman web biasa menjadi halaman web yang interaktif, kuat, dan sangat fungsional. Desain halaman web ini ramah pengguna dan komprehensif. Halaman web yang dirancang hover mengandung daya tarik konsumen yang lebih tinggi dan mereka menarik perhatian calon pelanggan.

Kompatibilitas Hover di CSS

Fitur hover kompatibel dengan semua browser web utama. Namun, penerapan elemen ini pada perangkat sentuh masih merupakan tugas yang menantang. Arahan di CSS memungkinkan aksesibilitas konten di perangkat yang tidak mendukung fungsi hover. Telah diamati bahwa fungsi hover yang diaktifkan di perangkat non-pendukung dapat macet di perangkat.

Akibatnya, tampilan vital dari konten penting diblokir melalui masalah format. Di satu sisi, di mana elemen hover dalam program CSS berkontribusi pada tingkat personalisasi yang efisien ke halaman web, sebaliknya, operabilitasnya pada perangkat seluler sangat tidak aktif. Sesuai dengan keadaan di mana dunia teknologi informasi berkembang secara substansial mobile, fitur hover berisiko menjadi usang dengan kemajuan teknologi. Oleh karena itu, kebutuhan untuk membuat fitur tertanam portabel yang berfungsi dengan perangkat sentuh dan seluler sangatlah penting.

Bagaimana cara kerja Hover di CSS?

Gaya pseudo-class aktif dominan dalam pemformatan hover CSS dan gaya ini menggantikan setiap / semua tautan berikutnya yang diikuti oleh pseudo-class ini. Misalnya dalam pseudo-class “: link: visiting, atau: active aturan: hover harus ditempatkan setelah: link dan: dikunjungi tetapi sebelum: aktif untuk yang sesuai: gaya hover. LVHA-order:: link,: hover,: visiting, dan: active digunakan sebagai referensi untuk gaya formatting: hover yang tepat.

perbedaan antara hashmap dan hashtable di java

div {background-color: padding hijau: 18px display: none} span: hover + div {display: block}Hover Test!Kode tersembunyi ditampilkan saat mengarahkan kursor

Pada kode di atas, elemen span dimodifikasi untuk menggabungkan elemen hover dan div dengan menggunakan elemen span: hover + div. Elemen span yang akan ditampilkan di halaman landing utama akan menampilkan teks 'Hover test!' Mengarahkan kursor ke elemen span lebih lanjut mengungkapkan elemen div 'Kode tersembunyi menunjukkan saat melayang'. Format penyematan ini beroperasi pada teks serta gambar.

Arahkan Perubahan Warna Latar Belakang Menjadi 'Merah'

p: hover, h1: hover, a: hover {background-color: Red}
Arahkan Merah
 
Arahkan Merah
 
Tautan:
 
Hover Test Merah:
  Google com  
  catatan: Halo
 

Kode di atas menyesuaikan

,

dan elemen dan mengintegrasikannya ke dalam fungsi hover umum. Kode ini dirancang untuk mengubah warna teks menjadi merah saat penunjuk mouse diarahkan ke atasnya. Komponen h1 dan h2 masing-masing menampilkan “CSS: Hover Test Code” dan “Hover Red”. Elemen paragraf: Uji Arahkan Merah dan tag jangkar: google.com disorot dengan warna merah saat penunjuk mouse diarahkan ke atasnya.

Membuat Hover Opacity pada Gambar

.pic {width: 1900px height: 1900px opacity: 1 filter: alpha (opacity = 100) background: url (https://cdn.p1080.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {opacity: 0.2 filter: alpha (opacity = 30)}

Program CSS di atas menampilkan modifikasi opasitas gambar saat melayang. Keburaman asli gambar adalah satu namun, penggunaan filter hover opacity yang sama telah dimodifikasi menjadi 0,2. Kode ini menunjukkan bahwa dengan memanfaatkan elemen hover seseorang dapat mengubah opasitas gambar dan / atau teks.

Membuat Text Overlay pada Gambar

.pic {width: 4000px height: 2170px background: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {width: 3400px height: 2170px background: #FFF opacity: 0} .pic: hover .text {opacity: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} Oranye adalah serat buah yang kaya. Anti oksidan yang ada dalam jeruk dapat membantu pencernaan, membuat kulit bersinar dan bertindak sebagai elemen anti penuaan.

Layering Teks di CSS hover adalah alat yang efisien untuk menyematkan teks deskriptif gambar di dalam gambar itu sendiri. Alat bantu ini memberikan gambaran ringkas dari gambar tanpa menghabiskan ruang tidak aktif di ruang desain web yang terbatas. Dalam kode ini, gambar latar belakang disematkan dengan teks deskriptif yang ditampilkan saat penunjuk mouse mengarahkan kursor ke teks.

Ini menyimpulkan semua aspek penting hover di CSS dan menyoroti kegunaannya dalam pengembangan web. Ada banyak efek khusus yang dapat dibawa ke halaman web kita. Kami selalu dapat mencoba kombinasi berbeda dari pemilih hover dengan properti CSS lain seperti animasi, gambar latar belakang, hyperlink, dll dan menjelajahi potensinya seperti yang kami lihat di beberapa contoh kami. Akhirnya, CSS adalah salah satu cara paling ampuh untuk merancang dan mengubah halaman web dan oleh karena itu sangat dekat bagi pengembang web untuk memperoleh keterampilan ini untuk membangun halaman web yang dinamis.

Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini mencakup pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.

Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar di blog 'Arahkan ke CSS' dan kami akan menghubungi Anda kembali.