Example code for JS + DIV to achieve the effect of mouse over the switching Layer

<Style>
/* The topic switching style starts */
. None {display: none ;}
. Block {display: block ;}
/* Header style */
. S_c {width: 800px; text-align: center ;}
. S_c ul {clear: both; margin: 0 ;}
. S_c li {list-style: none; float: left; position: relative; width: 70px ;}
/**/
. C_0 {background-color: # CCCCCC;}/* Hide status */
. C_1 {background-color: # 0000CC;}/* display status */
/**/
. S_ B {
Border: 1px solid #666;
Height: 160px;
Width: pixel PX;
}

/**/
/* End of the topic switching style */

</Style>
<Script language = "javascript">
Function aa (s_id ){
For (I = 1; I <7; I ++ ){
If (I = s_id ){
Document. getElementById ("s" + I). className = "block"; // content style
Document. getElementById ("m" + I). className = "c _" + I + "c_1"; // the style of the header
// Document. getElementById ("uid _" + I). focus ();
}
Else
{
Document. getElementById ("s" + I). className = "none"; // The content is not displayed.
Document. getElementById ("m" + I). className = "c_0 ";//
}
}
}
</Script>

<Div>
<Ul>
<Li> <div id = "m1"> <a href = "#" onmouseover = "aa (1) "> Category 1 </a> </div> </li>
<Li> <div id = "m2"> <a href = "#" onmouseover = "aa (2) "> Category 2 </a> </div> </li>
<Li> <div id = "m3"> <a href = "#" onmouseover = "aa (3) "> Category 3 </a> </div> </li>
<Li> <div id = "m4"> <a href = "#" onmouseover = "aa (4) "> category 4 </a> </div> </li>
<Li> <div id = "m5"> <a href = "#" onmouseover = "aa (5) "> Category 5 </a> </div> </li>
<Li> <div id = "m6"> <a href = "#" onmouseover = "aa (6) "> Category 6 </a> </div> </li>
</Ul>
</Div>

<Div>

<Div id = "s1">
<Div> Part 1 </div>
</Div>
<Div id = "s2">
<Div> Part 2 </div>
</Div>
<Div id = "s3">
<Div> Part 3 </div>
</Div>
<Div id = "s4">
<Div> Part 4 </div>
</Div>
<Div id = "s5">
<Div> Part 5 </div>
</Div>
<Div id = "s6">
<Div> Part 6 </div>
</Div>

</Div>