Cascading Style Sheets (CSS) direka menggunakan atau format XML (termasuk XHTML, SVG). Ini adalah bahasa lembaran gaya yang digunakan terutamanya untuk menerangkan elemen melalui pelbagai kaedah pemformatan. Salah satu kaedah adalah melayang dan dalam artikel ini, kita akan memahami Hover dalam CSS dengan cara berikut:

• Apa itu Hover dalam CSS?
• Di mana Hover Digunakan?
• Apa yang dilakukan oleh Hover?
• Keserasian
• Bagaimanakah ia berfungsi?
• Tuding Warna Latar Belakang Tukar kepada 'Merah'
• Membuat Kelegapan Tuding pada Imej
• Membuat Hamparan Teks pada Gambar

Apa itu Hover dalam CSS?

CSS hover adalah komponen pemilih yang digunakan untuk menata elemen yang berbeza ketika penunjuk tetikus melayang di atasnya. Mereka boleh digunakan pada hampir setiap elemen HTML. Ciri hover dalam CSS sangat penting dalam merancang laman web.

Komponen hover dapat menyerlahkan, mengekod dan menyesuaikan halaman web mengikut pilihan pengguna dalam program reka bentuk web yang ringkas dan berkesan.

Di mana Hover Digunakan?

Contoh yang paling umum mengenai daya maju ciri hover boleh diserlahkan di laman web membeli-belah utama seperti Flipkart dan Amazon. Apabila pengguna mengarahkan kursor ke mana-mana produk di laman web e-commerce ini, produk diprogramkan untuk melakukan fungsi zoom hover automatik untuk memberikan pelanggan pandangan yang lebih baik mengenai produk yang mereka pilih. Melalui pengaturcaraan ini, halaman web dirancang untuk menampilkan paparan ringkas dari keseluruhan rangkaian produk disertai dengan pandangan terperinci mengenai produk yang menarik dalam satu reka bentuk halaman web.

Apa yang dilakukan oleh Hover?

Hover adalah alat pengaturcaraan pelbagai fungsi di mana pengguna dapat menyesuaikan elemen sasaran dengan sejumlah kriteria format. Beberapa contoh pengetahuan operasi ciri hover termasuk:

• Menukar Latar Belakang / Warna Fon
• Melekatkan Teks Tersembunyi yang Dipaparkan di Tuding
• Buat Kesan Rollover pada Gambar
• Zum Automatik pada Teks / Imej
• Ubah Kelegapan Imej
• Penyisipan Teks
• Pertukaran Imej
• Div. Tuding
• Pelbagai Operasi Pemformatan Hover CSS Lain.

Kesan hover pada dasarnya mengubah nilai harta elemen untuk membolehkan perubahan animasi pada teks / gambar yang dinyatakan atau elemen masing-masing. Penyisipan elemen hover CSS dalam reka bentuk halaman web mengubah halaman web biasa menjadi halaman web yang interaktif, mantap dan sangat berfungsi. Reka bentuk laman web ini mesra pengguna dan komprehensif. Laman web yang dirancang Hover mengandungi daya tarikan pengguna yang lebih tinggi dan menarik perhatian bakal pelanggan.

Keserasian Hover dalam CSS

Ciri hover serasi dengan semua penyemak imbas web utama. Walau bagaimanapun, pelaksanaan elemen ini pada peranti sentuh masih merupakan tugas yang mencabar. Tuding di CSS membolehkan kebolehcapaian kandungan pada peranti yang tidak menyokong fungsi hover. Telah diperhatikan bahawa fungsi hover yang diaktifkan pada peranti yang tidak menyokong dapat tersekat pada peranti.

Oleh itu, paparan penting kandungan penting disekat melalui masalah pemformatan. Di satu sisi di mana elemen hover dalam program CSS menyumbang tahap pemperibadian yang cekap ke laman web sebaliknya, kebolehoperasiannya pada peranti mudah alih sangat tidak aktif. Dengan memanfaatkan keadaan di mana dunia teknologi Maklumat berkembang dengan ketara, ciri hover berisiko menjadi usang dengan kemajuan teknologi. Oleh itu, keperluan untuk membuat ciri tertanam mudah alih yang berfungsi dengan peranti sentuh dan mudah alih sangat penting.

Bagaimana Hover berfungsi dalam CSS?

Gaya kelas pseudo aktif dominan dalam format hover CSS dan ia mengatasi mana-mana / semua pautan berikutnya yang diikuti oleh kelas pseudo ini. Contohnya dalam pseudo-class “: link: dikunjungi, atau: aktif peraturan: hover perlu diletakkan selepas: link dan: dikunjungi tetapi sebelum: aktif untuk sesuai: gaya hover. Urutan LVHA:: link,: hover,: dikunjungi, dan: aktif digunakan sebagai rujukan untuk gaya: hover format yang betul.

div {background-color: green padding: 18px display: none} span: hover + div {display: block}Uji Tuding!Tayangan kod tersembunyi di hover

Dalam kod di atas, elemen span diubah untuk menggabungkan elemen hover dan div dengan menggunakan elemen span: hover + div. Elemen span yang akan dipaparkan di laman web pendaratan utama akan menunjukkan teks 'Uji hover!' Melayang lebih jauh pada elemen span menunjukkan elemen div 'Hidden code shows on hover'. Format penyematan ini beroperasi pada teks dan juga gambar.

Tuding Warna Latar Belakang Tukar kepada 'Merah'

p: hover, h1: hover, a: hover {latar belakang-warna: Merah}
Tuding Merah
 
Tuding Merah
perbezaan antara hashmap dan hashtable dalam java
 
Pautan:
 
Hover Uji Merah:
  Google com  
  Catatan: hello
 

Kod di atas menyesuaikan

,

dan elemen dan mengintegrasikannya ke dalam fungsi hover biasa. Kod ini direka untuk mengubah warna teks menjadi merah apabila penunjuk tetikus melayang di atasnya. Komponen h1 dan h2 masing-masing memaparkan 'CSS: Hover Test Code' dan 'Hover Red'. Elemen perenggan: Hover Test Red dan anchor tag: google.com akan diserlahkan dengan warna merah apabila penunjuk tetikus melayang di atasnya.

Membuat Kelegapan Tuding pada Imej

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

Program CSS di atas memaparkan pengubahsuaian kelegapan gambar semasa melayang. Kelegapan asal gambar adalah satu namun, menggunakan penapis opacity hover yang sama telah diubah suai menjadi 0.2. Kod ini menunjukkan bahawa dengan menggunakan elemen hover seseorang dapat mengubah kelegapan gambar dan / atau teks.

Membuat Hamparan Teks 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} Orange adalah serat buah yang kaya. Anti-oksidan yang terdapat pada oren dapat membantu pencernaan, menjadikan kulit bersinar dan bertindak sebagai elemen anti-penuaan.

Pelapisan Teks dalam CSS hover adalah alat yang cekap untuk menyisipkan teks deskriptif gambar dalam gambar itu sendiri. Alat ini membantu dalam memberikan gambaran keseluruhan ringkas mengenai gambar tanpa mengambil ruang yang tidak aktif dalam ruang reka bentuk web yang terhad. Dalam kod ini, gambar latar disisipkan dengan teks deskriptif yang dipaparkan ketika penunjuk tetikus melayang di atas teks.

Ini menyimpulkan semua aspek penting yang terdapat dalam CSS dan menyoroti kebolehgunaannya dalam pembangunan web. Terdapat banyak kesan khas yang boleh dibawa ke laman web kami. Kami sentiasa boleh mencuba pelbagai kombinasi pemilih penunjuk dengan sifat CSS lain seperti animasi, gambar latar, pautan hiperpautan dan lain-lain dan meneroka potensinya seperti yang kami lihat dalam beberapa contoh kami. Akhirnya, CSS adalah salah satu kaedah yang paling berkesan untuk merancang dan mengubah halaman web dan oleh itu adalah mustahak bagi pembangun web untuk memperoleh kemahiran ini untuk membina laman web yang dinamik.

Lihat kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini menjadikan anda mahir dalam kemahiran bekerja dengan teknologi web back-end dan front-end. Ia merangkumi latihan mengenai Pembangunan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.

Ada soalan untuk kami? Sila sebutkan di bahagian komen blog 'Hover in CSS' dan kami akan menghubungi anda.