CSS+DIV设计实例:Hover over下的边框变化 2022-07-15 80酷酷网 80kuku.com css|设计<!DOCTYPE html PUBLIC "-//W3C//DTD 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> ——您可以运行代码察看特效,您也可以复制或者另存源代码。本代码由天极网页陶吧提供。