效果
链接在正常、鼠标移入、点击时有不同的效果
方法
为超链接的每个状态设置不同的背景图片
a:link{
display:block;
width:93px;
height:29px;
background-image: url('./img/link.png');
}
a:hover{
background-image: url('./img/hover.png');
}
a:active{
background-image: url('./img/active.png');
}
存在的问题
- 图片属于外部资源,浏览器在需要时才加载,所以第一次鼠标移入、第一次点击切换效果前,会有短暂的发白
- 可在浏览器“检查”功能中查看资源加载情况