<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> a </title>
<Style type = "text/css">
Ul # hovershow {
List-style-type: none;
Margin: 50px;
Float: left;
Display: inline;
Clear: both;
}
Ul # hovershow li {
Float: left;
Display: inline;
Width: 64px;
Height: 64px;
Margin: 2px;
}
Ul # hovershow li {
Display: block; width: 64px;
Height: 64px; }
Ul # hovershow li a img {
Border: 1px #666 solid;
Width: 100%;
Height: 100%;
}
Ul # hovershow li a: hover {
Position: absolute;
Z-index: 100;
Margin:-32px 0 0-32px;
}
Ul # hovershow li a: hover img {
Width: 128px;
Height: 128px;
Border: 1px red solid;
}
</Style>
</Head> <Body>
<Ul id = "hovershow">
<Li> <a href = "1 #" title = "test"> </a> </li>
<Li> <a href = "2 #" title = "test"> </a> </li>
<Li> <a href = "3 #" title = "test"> </a> </li>
<Li> <a href = "4 #" title = "test"> </a> </li>
<Li> <a href = "5 #" title = "test"> </a> </li>
<Li> <a href = "6 #" title = "test"> </a> </li>
<Li> <a href = "7 #" title = "test"> </a> </li>
</Ul>
</Body>
</Html>
See the following two results: Paging effect. <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> a </title>
<Style type = "text/css">
Ul # hovershow2 {
List-style-type: none;
Margin: 50px;
Width: 200px;
Float: left;
Display: inline;
Clear: both;
}
Ul # hovershow2 li {
Float: left;
Display: inline;
Width: 20px;
Height: 20px;
Margin: 2px;
}
Ul # hovershow2 li {
Text-decoration: none;
Display: block;
Width: 20px;
Height: 20px;
Border: 1px red solid;
Background-color: White;
Line-height: 20px;
Font-size: 12px;
Text-align: center;
} Ul # hovershow2 li a: hover {
Position: absolute;
Width: 40px;
Height: 40px;
Line-height: 40px;
Font-size: 32px;
Z-index: 100;
Margin:-10px 0 0-10px;
}
</Style>
</Head> <Body> <Ul id = "hovershow2">
<Li> <a href = "1 #" title = "test"> <span> 1 </span> </a> </li>
<Li> <a href = "2 #" title = "test"> <span> 2 </span> </a> </li>
<Li> <a href = "3 #" title = "test"> <span> 3 </span> </a> </li>
<Li> <a href = "4 #" title = "test"> <span> 4 </span> </a> </li>
<Li> <a href = "5 #" title = "test"> <span> 5 </span> </a> </li>
<Li> <a href = "6 #" title = "test"> <span> 6 </span> </a> </li>
<Li> <a href = "7 #" title = "test"> <span> 7 </span> </a> </li>
</Ul> </Body> |
