JQuery demo

最新推荐文章于 2021-03-18 14:38:42 发布

weixin_30755393

最新推荐文章于 2021-03-18 14:38:42 发布

阅读量120

点赞数

文章标签：测试前端 javascript ViewUI

原文链接：http://www.cnblogs.com/winters1992/p/5936652.html

版权

<!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 仿照慕课网前端做的玩意

转载于:https://www.cnblogs.com/winters1992/p/5936652.html

weixin_30755393

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery demo

<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>mooc</title> <style type="text/css"> .moco-course-box { ...
复制链接

扫一扫