Cara membuat pautan dengan imej hover dalam CSS biasa

Artikel yang ditulis oleh:
  • Rekabentuk laman web
  • Dikemaskini: Aug 02, 2013

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

'Hover' adalah kesan yang berlaku apabila anda meletakkan kursor di atas sebarang jenis pautan. Pautan boleh dikodkan untuk menjawab hover dengan menukar warna, menunjukkan grafik baru, atau memainkan fail bunyi.

Kesan hover meningkatkan kebolehgunaan web dan membantu pemilik web untuk mengarahkan trafik web mereka. Apabila anda ingin pengguna web anda memberi perhatian tambahan kepada pautan khas, cara yang baik untuk melakukannya ialah membuat pautan dengan kesan hover yang menarik. Kesan hover yang mudah seperti ini (garis bawah dan perubahan warna teks yang ringkas) menunjukkan teks itu 'klik-dapat' dan meningkatkan interaksi web. Walau bagaimanapun, mengubah warna dan gaya teks (garis bawah / overline / tebal) adalah sangat asas dan terdapat banyak lagi yang boleh dilakukan dengan melayang.

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

Contoh 1: Pautan dengan butang hover

Pertama, melihat contoh kerja (tetikus di atas pautan untuk melihat cara kerjanya - perubahan ikon di sisi).

Contoh 1 - Pautan dengan imej 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.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> Homepage </a> </ p>

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 dalam latar belakang 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, di sini 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 <a href> dalam kod sumber anda dengan mudah. Contoh:

<a href="http://www.webhostingsecretrevealed.com" class="y"> Homepage </a>

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.

Lebih banyak tutorial CSS

Jika anda suka post ini, pastikan anda juga menyemak Bagaimana untuk menggunakan animasi CSS 3 dengan baik, Mesti Baca CSS 3 Tutorial 2012, Serta Buat laman web anda dengan teknik CSS 3 ini.

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.