CSS+DIV设计实例：Hover over下的边框变化

来源: 时间:06-09-11 点击: 点击这里收藏本文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/<a href=http://www.jzxue.com/Html/htmlcss/ target=_blank>xhtml</a>1/DTD/<a href=http://www.jzxue.com/Html/htmlcss/ target=_blank>xhtml</a>1-transitional.dtd">
<html <a href=http://www.jzxue.com/Html/XML/ target=_blank>xml</a>ns="http://www.w3.org/1999/<a href=http://www.jzxue.com/Html/htmlcss/ target=_blank>xhtml</a>">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/<a href=http://www.jzxue.com/html/css/ target=_blank>css</a>">
p#outer {
 	position:relative;
 	float:left;
 	margin-top:20px;
 	margin-left:20px;
 	background: blue;
 }
#outer a {
	margin:0; 
	background-color:blue;
	display:block;
	position: relative;
 	border:2px dashed red;
}
#outer a:hover {border:2px dashed #CCFFCC;}
#outer img {display:block;border:none;background:#ffffcc;padding:4px;}
</style>
</head>
<body>
<h1>Hover over the image to see the double border effect</h1>
<p id="outer"><a href="#"><img src="http://www.pmob.co.uk/temp/images/screenanother3col.gif" alt="example image border" width="150" height="86" /></a> 
</p>
</body>
</html>
<script language="Javascript"> 
var now = new Date(); 
document.write("<img src='http://counter.yesky.com/counter.<a href=http://www.jzxue.com/Html/shtml/ target=_blank>shtml</a>?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); 
</script> 
<noscript> 
<img src="http://counter.yesky.com/counter.<a href=http://www.jzxue.com/Html/shtml/ target=_blank>shtml</a>?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> 
</noscript>

——您可以运行代码察看特效，您也可以复制或者另存源代码。

把此文章收藏到：　　　　　

相关教程

·CSS+DIV实现的滑动门菜单特效代

·CSS+DIV+JS导航菜单和Flash效果

·网页设计之css+div PK table+c

·CSS+DIV设计实例：Hover over下

广而告之

文章搜索

Google JZxue.Com

最新文章

网站推广—网站建设的关键课

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

推荐导读

优秀个人网站打造全过程

热门排行

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册