摘要：语法：hover(over,out)over:鼠标移上元素要出发的一个函数，out：鼠标移出元素要触发的一个函数！例：$('选择器').hover(function(){移上要做的事件}，function(){移出要做的事件})toggle() //如果元素可见的，就切换为隐藏，否则相反！总结：hove内部必须写两个函数，函数之间用逗号隔开。toggle()是判断元素是否可见如果可
语法：
hover(over,out)
over:鼠标移上元素要出发的一个函数，out：鼠标移出元素要触发的一个函数！
例：$('选择器').hover(
function(){
移上要做的事件
}，
function(){
移出要做的事件
}
)
toggle() //如果元素可见的，就切换为隐藏，否则相反！
总结：hove内部必须写两个函数，函数之间用逗号隔开。toggle()是判断元素是否可见如果可见就执行隐藏，如果不可见就执行显示效果！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.box{
width: 218px;height: 170px;
position: relative;top: 60px;left: 60px;
box-shadow: 1px 3px 7px #ccc;
}
.box img{
width: 218px;height: 130px;
border-radius: 10px;
}
.box span{
color: #ccc;
font-size: 10px;
padding: 5px 20px;
position: absolute;z-index: 10;/*层级z-index必须在定位后面*/
}
.box p{
height: 80px;
padding: 0 20px;
background: #fff;
font-size: 14px;
text-indent: 2em;
position: absolute;top: 65px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box">
<img src="http://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt="">
<p>javaScript极速入门_玉女心经系列</p>
<span>123人在看</span>
</div>
<script src="jQuery/jQuery-3.3.1.js"></script>
<script>
$(function(){
$('.box').hover(
function(){
$('p').stop().animate({'top':'40px'})
// stop()是停止当前动画
// animate() 方法执行 CSS 属性集的自定义动画。
},
function(){
$('p').stop().animate({'top':'65px'})
})
})
</script>
</body>
</html>
批改老师：灭绝师太批改时间：2019-01-11 13:46:18
老师总结：很棒，有好好听课哦！jq的知识点主要就是需要运用，学以致用很重要，还是要多多练习哒
