abstrak：語法：hover(over,out)over:鼠標移上元素要出發(fā)的一個函數(shù)，out：鼠標移出元素要觸發(fā)的一個函數(shù)！例：$('選擇器').hover(function(){移上要做的事件}，function(){移出要做的事件})toggle() //如果元素可見的，就切換為隱藏，否則相反！總結：hove內部必須寫兩個函數(shù)，函數(shù)之間用逗號隔開。toggle()是判斷元素是否可見如果可
語法：
hover(over,out)
over:鼠標移上元素要出發(fā)的一個函數(shù)，out：鼠標移出元素要觸發(fā)的一個函數(shù)！
例：$('選擇器').hover(
function(){
移上要做的事件
}，
function(){
移出要做的事件
}
)
toggle() //如果元素可見的，就切換為隱藏，否則相反！
總結：hove內部必須寫兩個函數(shù)，函數(shù)之間用逗號隔開。toggle()是判斷元素是否可見如果可見就執(zhí)行隱藏，如果不可見就執(zhí)行顯示效果！
<!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() 方法執(zhí)行 CSS 屬性集的自定義動畫。
},
function(){
$('p').stop().animate({'top':'65px'})
})
})
</script>
</body>
</html>
Guru membetulkan：滅絕師太Masa pembetulan：2019-01-11 13:46:18
Rumusan guru：很棒，有好好聽課哦！jq的知識點主要就是需要運用，學以致用很重要，還是要多多練習噠