
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>33-jquery移入移出事件</title>
<style type=”text/css”> /*樣式開始*/
*{ /*表示 所選取的該元素以及其所屬的子元素 */
margin: 0; /*外邊距*/
padding: 0; /*內(nèi)邊距*/
}
.father{ /* 選中class叫父親的div盒子*/
width: 200px; /* 寬:200像素*/
height: 200px; /* 高:200像素*/
background: red; /* 背景:紅色*/
}
.son{ /* 選中class叫兒子的div盒子*/
width: 100px; /* 寬:100像素*/
height: 100px; /* 高:100像素*/
background: #0000FF; /* 背景:藍(lán)色*/
}
</style>
【html5零基礎(chǔ)入門教程 jquery引入插件的步驟】<script src=https://www.jinnalai.com/fenxiang/”
../static/js/jquery-3.6.0.js”></script> <!–引入jQuery 否則后面的$符號不能用 –>
<script>
$(function(){ /* jQuery 的入口函數(shù) */
// alert(‘入口函數(shù)’) /* 入口函數(shù)沒有錯誤就會彈出 */
/*
mouseover mouseout 事件,子元素被移入移出,也會觸發(fā)父元素的事件
*/
// $(“.father”).mouseover(function(){ /*選擇class叫父親的div的鼠標(biāo)移入事件*/
// alert(‘鼠標(biāo)進(jìn)入了父親的盒子區(qū)域’) /* 彈出窗口’鼠標(biāo)進(jìn)入了父親的盒子區(qū)域’*/
// })

// $(“.father”).mouseout(function(){ /*選擇class叫父親的div的鼠標(biāo)移出事件*/
// alert(‘鼠標(biāo)移出了父親的盒子區(qū)域’) /* 彈出窗口’鼠標(biāo)移出了父親的盒子區(qū)域’*/
// })

/*mouseenter mouseleave 事件,子元素被移入移出,不會觸發(fā)父元素的事件 */
// $(“.father”).mouseenter(function(){ /*選擇class叫父親的div的鼠標(biāo)移入事件*/
// alert(‘鼠標(biāo)進(jìn)入了父親的盒子區(qū)域’) /* 彈出窗口’鼠標(biāo)進(jìn)入了父親的盒子區(qū)域’*/
// })
// $(“.father”).mouseleave(function(){ /*選擇class叫父親的div的鼠標(biāo)移出事件*/
// alert(‘鼠標(biāo)移出了父親的盒子區(qū)域’) /* 彈出窗口’鼠標(biāo)移出了父親的盒子區(qū)域’*/
// })
// $(“.father”).hover(function(){ /* 同時監(jiān)聽鼠標(biāo)移入移出的事件用hover 子元素被移入移出,不會觸發(fā)父元素的事件*/
// console.log(‘鼠標(biāo)移入了’) /* 移入后調(diào)用*/
// }, function(){
// console.log(‘鼠標(biāo)移出了’) /* 移出后調(diào)用*/
// })
$(“.father”).hover(function(){ /* 同時監(jiān)聽鼠標(biāo)移入移出的事件用hover 子元素被移入移出,不會觸發(fā)父元素的事件*/
console.log(‘鼠標(biāo)移入移出了’) /*鼠標(biāo)移入和移出都監(jiān)聽了*/
})
})
</script>
</head>
<body>
<div class=”father”> <!– class叫父親的div盒子 –>
<div class=”son”> <!– class叫兒子的div盒子 –>
</div>
</div>
</body>
</html>
推薦閱讀
- hadoop數(shù)據(jù)分析案例 hadoop大數(shù)據(jù)開發(fā)基礎(chǔ)答案
- 我的俠客零氪玩家怎么玩 我的俠客零氪玩家薅羊毛攻略
- 拳擊俱樂部全成就解鎖指南 拳擊俱樂部成就怎么解鎖 基礎(chǔ)成就
- 零跑新能源汽車是哪個公司的
- 電動車零下幾度不可充電
- 零下40度車不入庫電瓶會壞嗎
- 糖尿病推薦零食
- 糖尿病患者零食推薦
- 糖尿病患者可以吃的零食有哪些
- 零跑c11汽車是哪個公司的
