控制鼠标滑过图片更换图片代码,Css代码库,德仔网

代码语言

代码分类

【Css】控制鼠标滑过图片更换图片

作者:彦灵 / 发布于2014/10/10/ 480


	<!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="#"></a></li>
	 <li><a href="#"></a></li>
	 <li><a href="#"></a></li>
	 </ul>
	</div>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　更换图片　　控制鼠标　　鼠标滑过　

同语言下

可能有用的

彦灵贡献的其它代码(1)

.控制鼠标滑过图片更换图片