用css实现图片替换

2016-02-19 21:20 28 1 收藏

今天图老师小编要向大家分享个用css实现图片替换教程，过程简单易学，相信聪明的你一定能轻松get！

【 tulaoshi.com - Web开发】

style
h2{font-size:14px; font-weight:bold; padding:10px 0; margin:5px 0; border-bottom:1px solid #ccc;}
.box2{}
.box2 img{display:block; padding:2px; border:0;}
.box2 a{color:#333; text-decoration:none;border:2px solid #FFF; float:left; cursor:hand;}
.box2 a span{display:none; color:#F00;}

.box2 a:hover{color:#999; border:2px solid #333; }
.box2 a:hover span{display:inline; position:absolute;}

/style
/head

body
h2CSSﾇﾐｻｻﾍｼﾆｬﾐｧｹ・/h2
div class="box2"
a href="#"spanimg src="http://list.mp3.baidu.com/list/images/tupic/funny_egaosucai02.jpg" //spanimg src="http://list.mp3.baidu.com/list/images/tupic/funny_egaosucai06.jpg" //a
/div

/body

来源:http://www.tulaoshi.com/n/20160219/1625922.html

上一篇：迭代法操作 SQL Server 数据表和数据库
下一篇：鼠标如何实现自动上下翻页的效果

看过《用css实现图片替换》的人还看了以下文章更多>>

CSS教程:纯CSS实现的圆角化图片

标签： Web开发

在前面一篇文章中，我们将一张上下渐变的的图片作为标题的背景，并将它应用了圆角效果。是不是这种圆角框只能用于比较单调的图片呢？我们还能将一些颜色比较丰富的图片也进行透明圆角化吗？答案是肯定的，下面看看它的终极功夫。还是先看最终效果图吧：图一看到了吧，这就是用纯CSS实现的圆角化图片，为了能看到透明化的效果，...

用CSS轻松实现网上填空

标签： Html CSS布局 Div+CSS XHTML

在网上做有奖信息的时候，经常看见一些注册表单，只有一条线供你填写，就跟做考卷时的填空题一样，很Cool！其实要做成这样的效果并不难，只需用一段很简短的CSS代码即可搞定！ < style type="text/css" < !-- .xian{BORDER-LEFT-STYLE: none; BORDER-RIGH...

CSS简单实例:用css来实现透视效果

标签： Web开发

用css实现透视效果今天萌发一个想法，用css来实现透视效果。起初，我想到的是我们常见的添加阴影效果的方法，用多个div通过偏移来实现，但这需要很多 div，不够理想。随后，我想到css的一个属性：border，在border相连接处可以产生对角线效果。这样用两个div就可以实现，我们先看看最终效果，然后再分析实现过程。首先，我们看看bor...

用CSS实现网页的绝对居中

标签： Web开发

6.FF1.5测试通过，绝对定位，直接定位上下左右，强制边局实现容器相对大小（标准）：代码：略 7.ff1.5 IE5 IE6通过测试 HTML代码 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html xmlns="//www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/htm...

用ASP+CSS实现随机背景

标签： ASP

随机背景--当你每次进入该页面时，从已指定的图片文件夹中，随机选取一个图片作为背景显示。这里介绍的方法是用ASP+CSS来实现的。 ASP--来自ASP101 以下是引用片段： Const IMGS_DIR = "/images" '设定图片文件夹的地址，随机显示该文件夹内任一张图片 Dim objFSO, objFolderObject, objFileCollection, objFile Dim ...

查看更多精彩>>