html部分

<div class="wrap";

        <ul>

             <li>

                   <a href="#">

                            <img src="01.jpg" alt="" class="small">

                             <img src="01.jpg" alt="" class="big">

                    </a>

                 </li>

           </ul?

</div>

css样式表

.wrap{

            width: 620px;

            margin: 20px auto;

        }

img{

            vertical-align: middle;

        }

   .big{

            display: none;

            position: absolute;

            left: -44px;

            top: -31.5px;

            padding: 2px;

            background: #fff;

            border: 1px solid #000;

            /*opacity: 0.5; 透明度 */

            z-index: 9;

        }

    .small{

            width: 100px;

            height:75px;

        }

.wrap ul li{

            float: left;

            padding: 5px;

            background: #eeeeee;

            border-style: solid;

            border-width: 1px;

            border-color: #ddd #bbb #aaa #ccc;

            position: relative;

            margin: 3px;

        }

        .wrap ul li a{

            display: block;

            width: 100px;

            height: 75px;

            padding: 2px;

            background: #fff;

            border-style: solid;

            border-width: 1px;

            border-color: #aaa #ccc #ddd #bbb;

        }

        .wrap ul li a:hover .big{

            display: block;

        }

图表图片放大

 

图表图片放大

 

相关文章: