A simple effect can be achieved only after three modifications. It seems that the details really determine success or failure.
<! 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; charsets = 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 )" >
Spring River Tide connected to Haiping
< Div Class = "L" ID = "C0" > < A Href = "#" > Favorites </ A > < A Href = "#" > Delete </ A > </ Div >
</ Div >
< Div Class = "B" ID = "B1" Onmouseover = "C (1 )" >
Spring River Tide connected to Haiping
< Div Class = "L" ID = "C1" > < A Href = "#" > Favorites </ A > < A Href = "#" > Delete </ A > </ Div >
</ Div >
< Div Class = "B" ID = "B2" Onmouseover = "C (2 )" >
Spring River Tide connected to Haiping
< Div Class = "L" ID = "C2" > < A Href = "#" > Favorites </ A > < A Href = "#" > Delete </ 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 >
Principle:
First, use the for loop to initialize the DIV to be hidden in the page, and then change the style of the hidden Div according to the parameters outside the loop.
Basically, the "display: None | block | inline" is the hidden display soul character ". CSS attributes are not described in detail.