CSS Background Rollover

LANGKAH SATU

Pertama, kita memiliki html untuk tombol afiliasi yang sebenarnya muncul:

1 2 3

<div> <a href = "#"> <img alt = "" src = "#" /> </ a> </ Div>

Pada dasarnya, kami membungkus gambar yang terhubung dalam div dan mendefinisikan kelas afiliasi.Membuat catatan bahwa lebar gambar adalah 88 pixel dan tingginya 31 piksel.

LANGKAH KEDUA

Karena kita mungkin akan ingin menggunakan gaya ini beberapa kali pada halaman, itu sebabnya aku menciptakannya sebagai sebuah kelas. Berikut CSS:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

. Afiliasi img { padding: 5px; border: 0; } . Affiliate { float: left; width: 98px; height: 41px; margin-top: 0; margin-right: 10px; margin-bottom: 10px; margin-left: 0; display: block; } . Affiliate a: hover { background-color: # cccccc; display: block; }

Kami menambahkan 5 pixel padding sekitar gambar. Itu berarti lebar sekarang akan ditambah 88 5 pada kedua sisi kiri dan kanan yang sama dengan 98 piksel. Ketinggian akan 31 ditambah 5 pada kedua bagian atas dan bawah yang sama dengan 41 piksel. Membuat perbatasan sama dengan nol menghilangkan perbatasan biru di sekitar gambar yang terhubung.

Kami mengapung masing-masing div meninggalkan sehingga mereka berbaris di samping satu sama lain.Namun, kami tidak ingin mereka terlalu dekat. Jadi kita menambahkan 10 pixel margin ke kanan dan bawah untuk mendorong mereka pergi sedikit.

Terakhir, kami menambahkan warna latar belakang untuk hover. Nikmati!