Mengubah gambar pada hover
Saya membutuhkan menu yang terdiri dari gambar-gambar dan gambar-gambar tersebut harus berubah ketika seseorang mengarahkan kursor di sekitarnya.
HTML
<div id="menu" >
<a href="#" id="home"><img src="images/about.png" alt="logo" /></a>
</div>CSS
#menu {
margin-left : 353px;
margin-top : -70px;
padding-bottom : 16px;
}
#home {
background : transparent url(images/about.png);
z-index : 1;
}
#home:hover {
background : url(images/aboutR.png);
z-index : 2;
}Masalah yang saya hadapi adalah ketika saya melayang di sekitar item menu, gambar yang akan ditampilkan pada hover ditampilkan di belakang gambar lama. Selain itu, gambar latar belakang hover yang ditampilkan sangat kecil lebar dan tingginya. Mohon bantuannya. Terima kasih ![masukkan deskripsi gambar di sini][1]
Anda memanggil <img src="images/about.png" alt="logo" /> dua kali, sekali di html dan sekali di css. Saya sarankan untuk menghapus html dan secara ketat menggunakan gambar latar belakang css. Anda juga tidak memerlukan z-index.
Hapus tag img, dan atur lebar dan tinggi #home (dan item menu lainnya) ke lebar dan tinggi gambar.
Juga, atur konten ke apa pun alt dari gambar (untuk tujuan aksesibilitas), dan kemudian atur properti text-indent sehingga dipindahkan dari halaman.
Saat ini, ketika Anda mengarahkan kursor, itu mengubah gambar latar belakang, tetapi tag img berada di atas, dan akan selalu demikian.
HTML
<div id="menu" >
<a href="#" id="home">Home</a>
</div>CSS
#menu{
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#home{
background:transparent url(images/about.png);
width: 400px;
height: 142px;
z-index:1;
text-indent: -9999em;
}
#home:hover{
background:url(images/aboutR.png);
z-index:2;
}
anda bisa melakukan a:hover img{display:none} yang akan menyingkirkan img, tidak tahu tentang masalah ukuran karena anda tidak menentukan ukurannya. jika saya jadi anda, saya akan membuang elemen img, menggunakannya sebagai gambar latar belakang untuk sebuah elemen, lalu mengubahnya pada :hover. atau jika anda menginginkan elemen img, gunakan properti klip mengikuti prinsip yang sama seperti di atas.
