画像で構成されたメニューを必要としており、誰かがその周りにカーソルを置くと画像が変化する必要があります。
<div id="menu" >
<a href="#" id="home"><img src="images/about.png" alt="logo" /></a>
</div>
#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;
}
私が直面している問題は、メニューアイテムの周りにホバーすると、ホバー時に表示される画像が古い画像の後ろに表示されることです。また、ホバー時に表示される背景画像は、幅・高さともに非常に小さい**です。どうか、よろしくお願いします。ありがとうございます。 ![画像の説明をここに入力][1].
imgタグを削除して、
#home`(およびその他のメニューアイテム)の幅と高さを、画像の幅と高さに設定します。
また、コンテンツには画像の alt
を設定し(アクセシビリティのため)、text-indent
プロパティを設定して、ページ外に移動させます。
現在のところ、ホバーすると背景画像が変更されますが、img
タグは一番上にあり、今後もその状態が続きます。
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;
}