css实现 鼠标移上放大效果 或 显示隐藏内容 简单原型

 

适当调整即可变为图片放大镜效果，或者鼠标移上去显示隐藏内容(ie6对hover支持不够完善，推荐在火狐或谷歌中观看)。

效果如图：

 

 

css：

    .demo {
        width: 318px;
        margin: 100px auto 0 auto;
    }

    .demo:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
    }

    .demo li {
        width: 100px;
        height: 100px;
        border: 1px solid #e5e5e5;
        background: #fafafa;
        float: left;
        margin: 2px;
        list-style-type: none;
        position: relative;
        z-index: 1;
    }

    .demo li:hover { z-index: 2; }

    .demo li:hover div { display: block; }

    .demo li div {
        width: 204px;
        height: 204px;
        border: 1px solid #e5e5e5;
        position: absolute;
        top: -51px;
        left: -51px;
        display: none;
        background: #fafafa;
    }

html：

    <ul class="demo">
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
    </ul>

 

转载于:https://www.cnblogs.com/k13web/p/4139866.html