元の画像の上にカーソルを置いたときに表示される別の画像を作成するのに問題があります。リストされたボタンの残りのない私のコードは次のとおりです。
<nav class="buttons">
<ul>
<li class="left">
<a class="home" href="www.google.com">
<img src="img/Home_2.png"></a></li>
</ul>
</nav>
CSS:
.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}
.left{float:left}
.home:hover {background: url(../img/Home_crack.PNG)}
助言がありますか?
編集:素晴らしい提案ですが、「ホームボタン」にカーソルを合わせると、フロート内のものがすぐに表示されます。完全な浮動小数点プロパティを持つコードは次のとおりです。
HTML:
<nav class="buttons">
<ul>
<li class="left">
<a class="home" href="www.google.com">
<img src="img/Home_2.png"></a></li>
<li class="left">
<a href="www.google.com" class="menu">
<img src="img/Menu_2.png"></a></li>
<li class="right">
<a href="www.google.com" class="about">
<img src="img/About_2.png"></a></li>
<li class="right">
<a href="www.google.com" class="contact">
<img src="img/Contact_2.png"></a></li>
</ul>
</nav>
CSS:
.buttons img{width: 190px; margin:0px; padding:0px; margin:0 auto; margin-top:55px;}
.buttons ul{list-style-type: none; margin:0px; padding:0px}
.left{float:left}
.home:hover img{display:none}
.home:hover {background: url(../img/Home_crack.PNG);}
.right{float:right}
基本的に私は4つのボタンを分離したかった....左のフロートに1つ、右のフロートに1つ、そしてホバーすると、ボタンは別の画像に変わる....新しいimg {display:none}で左フロートが急速に点滅します。