css鼠标悬浮切换图片鼠标离开又恢复默认

快乐打工仔 分类:实例代码

在实际应用中,经常会遇到这样的效果,那就是在默认状态下元素显示一张图片,当鼠标悬浮的时候又会显示另外的图片,当鼠标离开的时候又会恢复默认图片,下面通过代码实例介绍一下如何实现此效果。

代码如下:

<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#link{
  width:100px;
  height:30px;
  display:block;
  overflow:hidden;
  background:url(mytest/demo/default.jpg);
}
#link:hover{
  background:url(mytest/demo/alt.jpg);
}
</style>
</head> 
<body>
<a id="link"></a>
</body> 
</html>

上面的代码实现了我们的要求,当鼠标悬浮的时候可以切换背景图片,鼠标离开又恢复默认,原理非常的简单,就是利用链接伪类实现此效果,这里不多介绍了,具体可以参阅CSS E:hover一章节。

回复

我来回复
  • 暂无回复内容