时间:2016-01-22 07:28 来源: 我爱IT技术网 作者:佚名
本文所分享的知识点是【CSS控制当鼠标滑过时更换图片的效果】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
CSS控制当鼠标滑过时更换图片的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS实现鼠标移动到图片，更换图片</title>
</head>
<style type="text/css">
*{ margin:0; padding:0;}
ul li{ list-style:none;}
.nav{ width:800px; height:40px; margin:150px auto;}
.nav ul li{ float:left; width:200px;}
.nav ul li a:link,a:visited{ display:block; width:190px; height:40px; background:url(/jscss/demoimg/wall_s1.jpg);}
.nav ul li a:hover{background:url(/jscss/demoimg/wall_s2.jpg);}
.nav ul li a:active{background:url(/jscss/demoimg/wall_s3.jpg);}
</style>
<body>
<div class="nav">
<ul>
<li><a href="http://www.jb51.net/css/109932.html#"></a></li>
<li><a href="http://www.jb51.net/css/109932.html#"></a></li>
<li><a href="http://www.jb51.net/css/109932.html#"></a></li>
</ul>
</div>
</body>
</html>
关于CSS控制当鼠标滑过时更换图片的效果的相关讨论如下：
相关问题：CSS代码鼠标经过图片变换如何做
答：这样就搞定了。。。里面的图片位置你自己放了哟~~~ >>详细
相关问题：CSS中如何让鼠标经过图片时切换图片
答：这里的文字不现实，只显示图片 a{background:url(a.jpg) no-repeat left top;display:block;width:100px;height:100px;text-decoration:none;text-indent:-20000px} a:hover{background:url(b.jpg) no-repeat left top;} >>详细
相关问题：css效果：鼠标经过行时，背景图片改变
答：把background 指向图片就可以了嘛 >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-