使用CSS实现放大器效果

 使用CSS实现放大器效果

< html >
< head >
     < title > 放大器效果 </ 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 a {...}{
            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 a{...}{
        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 >