当前位置：首页 > 网页特效 > 图片特效 >

鼠标经过CSS图片边框效

时间：2012-08-18 19:45 来源：未知作者：后浪收藏推荐

<!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>www.lanrentuku.com</title>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/css>
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #666666; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: "Trebuchet MS", Georgia, Verdana, serif
}

.photo .photo {
	FLOAT: left; MARGIN-BOTTOM: 12px; WIDTH: 185px
}
.photo A {
	DISPLAY: block; FONT-SIZE: 0.85em; BACKGROUND: url(http://www.lanrentuku.com/down/js/images/12451161910.png) #fff no-repeat 0px 0px; COLOR: #002c79; TEXT-DECORATION: none
}
.photo A:visited {
	BACKGROUND-POSITION: -371px 0px; COLOR: #7e7e7e
}
.photo A:hover {
	BACKGROUND-POSITION: -185px 0px; COLOR: #c24f00
}
.photo SPAN.desc {
	DISPLAY: block; TEXT-ALIGN: center
}
.photo IMG {
	DISPLAY: inline; MARGIN: 11px 11px 8px; WIDTH: 163px; HEIGHT: 105px
}
.photo {
	TEXT-ALIGN: center
}
.photo .photos-3 {
	MARGIN: auto; WIDTH: 555px
}
</STYLE>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

通过CSS进行定义的图片框架，主要是结合Image Replacement，定位平移的方法。当鼠标经过时边框的背景图片通过平移而产生效果。

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-pic/298.html