CSS鼠标移动到我的连接图片的时候更换另一张图片？

Question

先看清楚哦，我说的是连接图片
我把它放在一个连接边标签里面（就是<a>）
不过有个边框很难看，如何去掉这个边框。
鼠标移动到连接图片上面时候更换另一张图片。
鼠标移走的时候还原。

RT

Answer 1

写了个例子:
<a href="#"><img src="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif" border="0" onMouseOver="this.src='http://www.google.cn/intl/zh-CN/images/logo_cn.gif'" onMouseOut="this.src='https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/logo-zhidao.gif'" /></a>

给img标签加个属性:border="0"后,就不会有边框了
图片的高度和宽度可以不用设定,只是设置了鼠标的两种状态,切换的其实是图片的地址src

Answer 2

利用<a>的hover属性可以达到你要的效果
例如:
你提前准备好两个图片，且这些图片都是放在img的一个文件夹里，他们分别是默认状态（即link状态）下的link.gif和hover状态下的hover.gif
代码如下：
a{background:url(img/link.gif) no-repeat;height:xx px; width:xx px;
display:block;border:0px;}
a hover{background:url(img/hover.gif) no-repeat;height:xx px; width:xx px;
display:block;border:0px;}

其实就是给<a>设置的了一个背景图片作为连接的默认图片，然后单独给<a>的hover状态又重新定义了一个背景图片作为鼠标至上的样式而已。

图片在有连接的时候会有一个边框，要去掉边框的话，可以在<a>的样式里直接写上border:0px; 但是考虑到各个浏览器的问题，最好在<a>标签里加上<a border="0px">这样更好一些。