Cara membuat pautan dengan imej hover dalam CSS biasa

Artikel yang ditulis oleh: Jerry Low
  • Rekabentuk laman web
  • Dikemaskini: Feb 27, 2020

* Kemas kini nota: Siaran ini pertama kali diterbitkan pada bulan Oktober 2009. Beberapa teknik yang saya sebutkan mungkin ketinggalan zaman. Sila rujuk panduan ini untuk teknik penciptaan laman web terkini.

Apa yang berlaku? Definisi yang dipetik daripada UWStout.edu:

'Hover' adalah kesan yang berlaku apabila anda meletakkan kursor di atas pautan apa pun. Pautan dapat dikodekan untuk menanggapi hover dengan mengubah warna, menunjukkan grafik baru, atau bahkan memainkan fail suara.

Kesan hover meningkatkan kebolehgunaan web dan membantu pemilik web mengarahkan trafik web mereka. Apabila anda ingin pengguna web anda memberi perhatian tambahan pada pautan khas, cara yang baik untuk melakukannya adalah dengan membuat pautan dengan kesan hover yang menarik. Kesan hover sederhana seperti ini (garis bawah sederhana dan perubahan warna teks) menunjukkan teks tersebut 'dapat diklik' dan meningkatkan interaksi web. Walau bagaimanapun, mengubah warna dan gaya teks (garis bawah / garis besar / tebal) sangat asas dan ada banyak lagi yang boleh dilakukan dengan membawa hover.

Dalam artikel ini, saya akan menunjukkan bagaimana anda boleh membuat hubungan mencari yang baik dengan kesan hover.

Contoh 1: Pautan dengan butang hover

Pertama, lihat contoh yang berfungsi (letakkan tetikus di atas pautan untuk melihat cara kerjanya - pertukaran ikon di sebelah).

Contoh 1 - Pautkan dengan gambar butang hover

Ini adalah versi lengkap tentang apa yang akan dibina dalam contoh ini.

Bagaimana kita menciptanya dalam CSS biasa?

Imej Butang

Langkah 1, seperti yang anda lihat, kita memerlukan ikon anak panah dalam dua versi berbeza. Dalam contoh kami, saya menggunakan merah (#CC3300) sebagai butang pautan lalai; dan kelabu (#333333) untuk kesan hover. Butang tersebut boleh dengan mudah dibuat menggunakan mana-mana perisian pengeditan imej.

Kami kini mempunyai butang warna merah (katakan, b1.png) dan warna rey (butang berkata, b2.png). Gabung kedua-dua ini ke dalam satu fail imej dengan b1.png di atas b2.png. Ini akan menjadi imej terakhir kami untuk pautan itu. Namakannya (katakanlah, x.png) dan muat naik lokasi yang dikehendaki (untuk kes saya, saya letakkan dalam folder template WP saya).

Untuk rujukan anda:

b1.png , b2.png , dan x.png

Kod CSS

Seterusnya, pada kod CSS. Pada dasarnya apa yang kita mahu capai adalah untuk mengindikasikan teks pautan sedikit ke kanan untuk membuat ruang untuk butang; dan pada masa yang sama, memaparkan imej yang berbeza apabila pautan berada dalam keadaan hover. Ini adalah barang-barang yang sangat asas kecuali bahawa kita memerlukan sedikit sentuhan pada kedudukan latar belakang. Caranya ialah untuk menunjukkan bahagian atas imej (butang merah) untuk pautan asal; dan apabila berlegar, tukar imej latar belakang dengan margin -11px (ia mungkin berbeza di laman web anda) untuk menunjukkan butang kelabu.

.xa {color: #cc3300; padding-left: 14px; font-weight: bold; background-image: url (images / x.png); kedudukan latar belakang: 0 2px; ulangi latar belakang: tiada ulang; }
.xa: hover {color: #333333; padding-left: 14px; font-weight: bold; background-image: url (images / x.png); kedudukan latar belakang: 0 -11px; ulangi latar belakang: tiada ulang; }

Pelaksanaan

Untuk memaparkan kesan hover ini, masukkan kelas x ke kawasan yang ditetapkan. Berikut adalah contoh bagaimana anda boleh melakukannya.

Laman utama

Contoh 2: Pautan dalam latar belakang hover

Dengan konsep yang sama, terdapat cara yang tidak berkesudahan, anda boleh membuat pautan anda kelihatan sejuk. Berikut adalah contoh lain mengenai apa yang boleh kita lakukan dengan kesan hover dengan kaedah yang sedikit berbeza. Sekali lagi, lihat pada versi siap.

Contoh 2 - Pautan di latar hover

Dalam contoh ini, apa yang saya akan lakukan ialah membuat hiperpautan yang disukai butang di mana latar belakang akan berubah apabila pengguna meletakkan tetikus di atasnya.

Bagaimana kita menciptanya dalam CSS biasa?

Imej latar belakang

Pertama, buat dua imej segi empat bulat. Untuk tujuan demonstrasi, kami tidak akan menggabungkan dua imej ini dalam contoh ini. Kami akan namakan persegi panjang merah (#CC3300) sebagai b1.png; dan gelung merah (#9F2800) sebagai b2.png.

Kod CSS

Seterusnya, berikut adalah kod untuk helaian gaya anda (kami menamakan kelas 'y' dalam contoh kedua ini).

ay {lebar: 280px; ketinggian: 42px; warna: #000000; padding: 10px; teks-hiasan: tiada; paparan: blok; font-weight: bold; background-image: url (images / b1.png); ulangi latar belakang: tiada ulang; }
ay: hover {width: 280px; ketinggian: 42px; warna: #FFFFFF; padding: 10px; font-weight: bold; teks-hiasan: tiada; paparan: blok; background-image: url (images / b2.png); ulangi latar belakang: tiada ulang; }

Pelaksanaan

Untuk memaparkan pautan, masukkan kelas (y) ke dalam tag dalam kod sumber anda. Contoh:

Laman utama

Mengakhiri

Saya harap artikel ini membawa anda maklumat yang berharga dan mengilhami sebahagian daripada anda untuk menggunakan CSS dengan cara yang kreatif. Sekiranya ada perkara lain yang anda fikir saya harus menambah dalam panduan ini, jangan ragu untuk meninggalkan idea anda di bahagian komen.

Mengenai Jerry Low

Pengasas WebHostingSecretRevealed.net (WHSR) - semakan hosting yang dipercayai dan digunakan oleh pengguna 100,000. Lebih daripada 15 tahun pengalaman dalam web hosting, pemasaran affiliate, dan SEO. Penyumbang kepada ProBlogger.net, Business.com, SocialMediaToday.com, dan banyak lagi.