zoukankan      html  css  js  c++  java
  • 功能2 -- hover出现遮照效果

    方法1(jquery):animate();

    方法2(css):transition;

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title></title>
    
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            overflow: hidden;
            position: relative;
            width: 200px;
            height: 200px;
            background: #fff;
            border: 1px solid #000;
            margin: 0 auto;
        }
        .son {
            position: absolute;
            top: -100%;
            left: 0;
            width: 200px;
            height: 200px;
            background: rgba(0,0,0,.5);
            color: #fff;
        }
    </style>
    <style type="text/css">
        .father1 {
            overflow: hidden;
            position: relative;
            width: 200px;
            height: 200px;
            background: #fff;
            border: 1px solid #000;
            margin: 0 auto;
        }
        .son1 {
            position: absolute;
            top: -100%;
            left: 0;
            width: 200px;
            height: 200px;
            background: rgba(0,0,0,.5);
            color: #fff;
            transition: top 1s;
        }
        .father1:hover .son1 {
            top: 0%;
        }
        
    </style>
    </head>
    
    <body>
        <!-- jq方法 -->
        <div class="father">
            I am Father
            <div class="son">I am Son</div>
        </div>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript">
            $('.father').mouseover(function () {
                $(this).find('.son').stop()
                $(this).find('.son').animate({'top': '0%'}, 'slow')
            }).mouseout(function() {
                $(this).find('.son').stop()
                $(this).find('.son').animate({'top': '-100%'}, 'slow')
            })
        </script>
        <!-- css方法 -->
        <div class="father1">
            I am Father1
            <div class="son1">I am Son1</div>
        </div>
    </html>
  • 相关阅读:
    2018-8-10-win10-uwp-重启软件
    jquery动画滑入滑出
    jquery类操作
    jquery类操作
    jquery手风琴
    jquery突出显示
    jquery隔行变色
    jquery下拉菜单
    jquery筛选选择器
    jquery过滤选择器
  • 原文地址:https://www.cnblogs.com/lgyong/p/10558731.html
Copyright © 2011-2022 走看看