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

新客网 XKER.COM 2006-05-26 来源：收藏本文

<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
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.shtml?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.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> 
</noscript>

——您可以运行代码察看特效，您也可以复制或者另存源代码。本代码由天极网页陶吧提供。

上一篇：CSS+DIV设计实例：看看IE中有关1px的Bug 下一篇：CSS使用技巧20则

【收藏】【评论】【推荐】【投稿】【打印】【关闭】