JQuery demo 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>mooc</title>
    <style type="text/css">
        .moco-course-box {
            width: 224px;
            height: 172px;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;

        }
        .moco-course-intro {
            box-sizing: border-box;
            position: absolute;
            padding: 0 20px;
            transition: top .5s;
            top: 100px;
            width: 100%;
            background-image: url('http://www.imooc.com/static/moco/v1.0/dist/images/bg-course.png');;

        }
        h3{
            margin: 0;
            padding: 16px 0 6px;
            font-size: 12px;
            max-height: 40px;
            overflow: hidden;
            color: #07111b;
            line-height: 21px;
        }
        p{
            color: #93999f;
            font-size: 12px;
            height: 40px;
            overflow: hidden;
            line-height: 20px;
        }
    </style>
</head>

<body>

<div class="moco-course-box">
    <img src="http://img.mukewang.com/551b92340001c9f206000338-228-128.jpg" height="124" width="100%">
    <div class="moco-course-intro">

        <h3> JUnit—Java单元测试必备工具</h3>
        <p>Java单元测试利器! </p>
    </div>

</div>
<script src="//cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>

<script type="text/javascript">
    
    $('.moco-course-intro').mouseenter(function () {
        $(this).css('top','20px');
    });

    $('.moco-course-intro').mouseleave(function () {
        $(this).css('top','100px');
    });
</script>
</body>
</html>

蛮有意思的 最近学习JS跟CSS 仿照慕课网前端做的玩意

posted on 2016-10-07 20:36  winters86  阅读(165)  评论(0)  编辑  收藏  举报