WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>网页设计制作技巧>>不用javascript,使用CSS和HTML实现鼠标经过图片变换图片效果

不用javascript,使用CSS和HTML实现鼠标经过图片变换图片效果

[ 录入者:91ctc | 时间:2015-06-23 12:38:58 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

不使用javascript,使用CSS和HTML实现鼠标经过图片变换图片效果。演示地址。代码:

<!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>
<title>不用javascript,使用CSS和HTML实现鼠标经过图片变换图片效果</title>
<style>
	.main{
		width:332px;
		height:113px;
		border:1px solid gray;
	}
	.content{
		width:332px;
		height:113px;
		border:1px solid gray;
		background-image:url(images/1.jpg);
		background-repeat: no-repeat;
	}
	.content:hover{
		background-image:url(images/2.jpg);
	}
	a{
		text-decoration:none;
	}
</style>
</head>

<body>
  <div class="main">
    <a href="http://www.91ctc.com/"><div class="content"></div></a>
  </div>
</body>
</html>

相关推荐:

使用Dreamweaver实现鼠标经过图像变换图片效果

使用Javascript实现鼠标经过图片变换图片的效果

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号