zoukankan      html  css  js  c++  java
  • 当鼠标浮上时弹出一个覆盖层

    <div class="content">
    <ul>
    <li>
    <a href=""><img src="images/login-logo.png" alt="" /></a>
    <div>
    <p>123</p>
    <p>大家好</p>
    <p>怎么实现的</p>
    </div>
    </li>
    <li>
    <a href=""><img src="images/login-logo.png" alt="" /></a>
    <div></div>
    </li>
    <li>
    <a href=""><img src="images/login-logo.png" alt="" /></a>
    <div></div>
    </li>
    </ul>
    </div>
    </div>
    
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
    $(".content ul li a").mouseenter(function(){
    $this=$(this);
    $this.siblings().animate({top:"60px"});    
    }).mouseleave(function(){
    $this=$(this);
    $this.siblings().animate({top:"124px"});    
    });
    });
    </script>
    
    <style type="text/css">
    .content ul{overflow:hidden;}
    .content ul li{list-style:none;width:124px;height:126px;overflow:hidden;margin-bottom:20px;position:relative;}
    .content ul li div{width:124px;height:65px;top:124px;position:absolute;z-index:100;background-color:#000;opacity:0.3;filter:alpha(opacity=40)/*ie8--*/;progid:DXImageransform.Microsoft.Alpha(opacity=40)/*ie8*/}
    
    </style>

    或者直接用样式,但是不支持ie8-

    .content ul li:hover div{top:60px;transition:top 0.2s ease-in;}

  • 相关阅读:
    C++ 实现B+树
    SSM项目--
    spring+mybatis使用MapperScannerConfigurer简化配置
    SpringMVC复习总结
    MyBatis复习总结
    ajax
    几种常用页面的跳转
    MyShop-不用框架的基础javaweb项目
    jsp
    Guava 工具类之joiner的使用
  • 原文地址:https://www.cnblogs.com/fangdx/p/3972929.html
Copyright © 2011-2022 走看看