客齐集图片鼠标悬停效果

<! 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 "  c  />  
< title > zishu.cn test </ title >  
< style >  
body { font-size:12px; line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center; background:#FFF; color:#666; margin:50px; padding:0; list-style:none; }  
a:link,a:visited {color:#000099; text-decoration: underline;}  
a:hover,a:active {color:#000;text-decoration: none;}  
#zishu_test li { float:left; width:14%;text-align:center; margin:0 auto; list-style:none }  
#zishu_test li a {border-right:1px solid #fff;border-bottom:1px solid #fff; width:100px; height:110px; background:#fff;display:block; padding-top:10px; margin:auto}  
#zishu_test li img { width:75px; height:75px; display:block; text-align:center; margin:auto; background:#FFF; padding:3px; border:1px solid #D8A18B;}  
#zishu_test li span {display:none;}  
#zishu_test li a:hover span { margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; background:#FA9000; width:100px; color:#FFF; position:absolute; }  
*  html #zishu_test li a:hover span  {margin-left:-8px; }   /**/ /* IE6 */  
*+ html #zishu_test li a:hover span  {margin-left:-8px; } /**/ /* IE7*/  
#zishu_test li a:hover { border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; width:100px; height:110px; background:#F5F5F5;display:block; padding-top:10px;}  
</ style >  
</ head >  
< body >  
< div id = " zishu_test " >  
< ul >  
< li >< a href = " http://yy.kijiji.cn/u/秀才 " >< span > 64d  /   47  hits </ span >< img src = " /upload/remotupload/2007115142645556.jpg " > pixu </ a ></ li >  
< li >< a href = " http://yy.kijiji.cn/u/秀才 " >< span > 24d  /   35  hits </ span >< img src = " /upload/remotupload/2007115142645975.jpg " > 秀才 </ a ></ li >  
< li >< a href = " http://yy.kijiji.cn/u/秀才 " >< span > 66d  /   87  hits </ span >< img src = " /upload/remotupload/2007115142645548.jpg " > 透露 </ a ></ li >  
< li >< a href = " http://yy.kijiji.cn/u/秀才 " >< span > 40d  /   34  hits </ span >< img src = " /upload/remotupload/2007115142645774.jpg " > LIVID </ a ></ li >  
< li >< a href = " http://yy.kijiji.cn/u/秀才 " >< span > 47d  /   56  hits </ span >< img src = " /upload/remotupload/2007115142645670.jpg " > 老孟 </ a ></ li >  
< li >< a href = " http://yy.kijiji.cn/u/秀才 " >< span > 42d  /  36hits </ span >< img src = " /upload/remotupload/2007115142645235.jpg " > 小玉 </ a ></ li >  
< li >< a href = " http://yy.kijiji.cn/u/秀才 " >< span > 63d  /   67  hits </ span >< img src = " /upload/remotupload/2007115142646766.jpg " > pixu </ a ></ li >  
</ ul >  
</ div >  
</ body >  
</ html >

转载于:https://www.cnblogs.com/DavidLc/archive/2008/02/14/1069046.html