Question

求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;
}
哪里错了啊
回答出来必有重谢！！！

Answer 1

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

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

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

4. 你的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);
}

Answer 2

你的css是在换<a>的背景图片
<img src="images/sy1.png" alt="首页">这个一直没变

追问

那应该也把html中换成背景吗

追答

直接把去掉试试
其他不变