求html当鼠标停在图片上时会出现另一张图片时的css外联代码

附代码
html:<div class="sy1"><a href=""><img src="images/sy1.png" alt="首页"></a> </div>
css:.sy1 a{
width:248px;
height:42px;
position:absolute;
bottom:-42px;
background:url(images/sy1.png);
no-reapet;
display:block;
}
.sy1 a:hover{
width:248px;
height:42px;
background:url(images/sy2.png);
no-reapt;
display:block;
}
哪里错了啊
回答出来必有重谢！！！

你的css修改的是a标签的背景；

a标签中的内容把a标签的背景遮住了；

很不规范的写法，不建议给a标签添加宽度、背景之类的属性；

你的hover样式没必要重复sy1的初始样式。

因为1、2两点，即使你的背景是有变化的，你也看不到，始终只能看到sy1.png的内容。

你可以把div里面的a标签和img标签删掉，并将css中的a删掉，改为对sy1的样式。

然后链接的话你可以在div中加入onclick="window.open('链接地址')"：

<div class="sy1" onclick="window.open('链接地址')">
</div>

.sy1 {
     width:248px;
     height:42px;
     position:absolute;
     bottom:-42px; 
     background:url(images/sy1.png);
     display:block;
}
.sy1:hover {
     background:url(images/sy2.png);
}

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/f4m7pvf8vqq88247mq4.html