一个简单的效果，修改了三次才能达到如意的效果。看来，细节真的是决定成败。
<! 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=utf-8" >
< title > Document </ title >
< style >
.b { width : 200px ; margin : 10px auto ; height : 200px ; border : 1px solid #ccc ; background : #eee ; }
.l { width : 50px ; height : 50px ; border : 1px solid #ccc ; margin : 10px ; float : right ; display : none ; }
</ style >
< script >
window.onload = function (){
}
</ script >
</ head >
< body >
< div class ="b" id ="b0" onmouseover ="c(0)" >
春江潮水连海平
< div class ="l" id ="c0" >< a href ="#" > 收藏 </ a > < a href ="#" > 删除 </ a ></ div >
</ div >
< div class ="b" id ="b1" onmouseover ="c(1)" >
春江潮水连海平
< div class ="l" id ="c1" >< a href ="#" > 收藏 </ a > < a href ="#" > 删除 </ a ></ div >
</ div >
< div class ="b" id ="b2" onmouseover ="c(2)" >
春江潮水连海平
< div class ="l" id ="c2" >< a href ="#" > 收藏 </ a > < a href ="#" > 删除 </ a ></ div >
</ div >
< script >
function $(id) {
return document.getElementById(id);
}
function c(n){
for ( var i = 0 ; i < 3 ; i ++ ){
$( ' b ' + i).style.background = " #eee " ;
$( ' c ' + i).style.display = ' none ' ;
}
$( ' b ' + n).style.background = " #eff " ;
$( ' c ' + n).style.display = ' block ' ;
}
</ script >
</ body >
</ html >
原理：
先利用for循环初始化页面内待隐藏的div，然后根据循环外传来的参数对未隐藏div的进行样式改变。
基本上控制隐藏显示的灵魂人物是：“display:none | block | inline" 。css 属性如不多述。
本文转自豪情博客园博客，原文链接：http://www.cnblogs.com/jikey/archive/2009/12/11/1621677.html，如需转载请自行联系原作者
