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