您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

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

鼠标经过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>

<META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
<BODY><br /><br />
<DIV class=photo>
<DIV class=photos-3>
<SPAN class=photo><A class=thumb href="#"><IMG src="http://www.lanrentuku.com/down/js/images/12451161911.png" border=0> </A></SPAN>
<SPAN class=photo><A class=thumb href="#"><IMG src="http://www.lanrentuku.com/down/js/images/12451161911.png" border=0> </A></SPAN>
<SPAN class=photo><A class=thumb href="#"><IMG src="http://www.lanrentuku.com/down/js/images/12451161911.png" border=0> </A></SPAN>
</DIV></DIV>

<SCRIPT language=Javascript src="" type=text/javascript></SCRIPT>
</P></CENTER></BODY></HTML>

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

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

鼠标经过CSS图片边框效由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/298.html

标签：网站源码

上一篇：图片不存在的时候，显示一个默认图片

下一篇：很酷的JavaScript图片放大效果

[图片特效] HTML5鼠标悬停放大图片心形图片

[图片特效] 给图片加上播放按钮

[图片特效] 带左右按钮js+css淘宝网焦点图切

[图片特效] 带小圆点的大屏焦点图轮播代码

[图片特效] 鼠标经过CSS图片边框效

[图片特效] 原生js面对对象封装版仿淘宝首页

[图片特效] CSS Filter属性特效大全

[图片特效] 一个JS横向左右切换的枫叶焦点图

[图片特效] 图片不存在的时候，显示一个默认

[图片特效] Animated CSS3 Gallery基于 CSS3

[图片特效] JS实现图片翻书效果

[图片特效] 仿新浪滑屏大图广告定时收缩为小

相关内容推荐

弹出登陆框

数据库软件

数据库专栏

php中文手册

更换dedecms模板

Ajax企业级开发

增加百度信任

设计工作室

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1