Miss cssplay today
Http://www.cssplay.co.uk/menus/magnifier2.html
It seems like you are playing well.
Start topstyle by yourself.
We recommend that you see interesting styles ~ Don't rush to look at his CSS ~ Meaningless
2. Do it yourself ~ Rich clothes and food
<! 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>
Tip: you can modify some code before running it.
I feel good about myself ~~~
It mainly involves three parts: a: hover position: absolute; margin ~
But only after this is done ~ The A of IE5 is invalid.
3. Search for the patch
It's time to look at people's CSS ~ 'Although it is also IE5's A failure
# Enlarge {padding: 0; margin: 2em auto; list-style-type: none; width: 240px; height: 40px ;}
# Enlarge li {display: block; float: left; width: 40px; height: 40px; position: relative ;}
# Enlarge li a {display: block; width: 40px; height: 40px; background: transparent; overflow: hidden; position: relative ;}
# Enlarge li a img {width: 100%; height: 100%; border: 0 ;}
# Enlarge li a: hover {position: absolute; left:-20px; top:-20px; width: 80px; height: 80px; z-index: 100 ;}
Tip: you can modify some code before running it.
FT ~ Write a definition more than others ~~
The method is to use position: relative and left top, which are the same as negative values ~
4. Let alone
I suddenly thought of the recently written car wiping Forum ~ The pages below the post can be used in this way ~
<! 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>
</Html>
Tip: you can modify some code before running it.
Okay, it's more fun ~ Quit IE ~
<! 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;
}
Ul # hovershow2 li: hover + li {
Position: absolute;
Width: 30px;
Height: 30px;
Line-height: 30px;
Font-size: 24px;
Z-index: 99;
Margin:-5px 0 0-5px;
}
</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>
</Html>
Tip: you can modify some code before running it.
The effect is not very satisfactory.
I tried to change the width of A to the left side ~ But no number is displayed ~ Poor looking
I also tried using the original method.
Use one side: add the image to the left after ~ However ~ One side has numbers while the other side does not ~ Not nice-looking ~~ N images with numbers cannot be made ~ Poor scalability
Maybe this is restricted by css.
Maybe ~ JS can be used for a simpler solution ~ ''''
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
