专业编程基础技术教程

网站首页 > 基础教程 正文

33-jquery移入移出事件

ccvgpt 2024-11-26 00:54:28 基础教程 1 ℃

<!DOCTYPE html>

<html>

33-jquery移入移出事件

<head>

<meta charset="utf-8">

<title>33-jquery移入移出事件</title>

<style type="text/css"> /*样式开始*/

*{ /*表示 所选取的该元素以及其所属的子元素 */

margin: 0; /*外边距*/

padding: 0; /*内边距*/

}

.father{ /* 选中class叫父亲的div盒子*/

width: 200px; /* 宽：200像素*/

height: 200px; /* 高：200像素*/

background: red; /* 背景：红色*/

}

.son{ /* 选中class叫儿子的div盒子*/

width: 100px; /* 宽：100像素*/

height: 100px; /* 高：100像素*/

background: #0000FF; /* 背景：蓝色*/

}

</style>

<script src="../static/js/jquery-3.6.0.js"></script> <!--引入jQuery 否则后面的$符号不能用 -->

<script>

$(function(){ /* jQuery 的入口函数 */

// alert('入口函数') /* 入口函数没有错误就会弹出 */

/*

mouseover mouseout 事件， 子元素被移入移出，也会触发父元素的事件

*/

// $(".father").mouseover(function(){ /*选择class叫父亲的div的鼠标移入事件*/

// alert('鼠标进入了父亲的盒子区域') /* 弹出窗口'鼠标进入了父亲的盒子区域'*/

// })

// $(".father").mouseout(function(){ /*选择class叫父亲的div的鼠标移出事件*/

// alert('鼠标移出了父亲的盒子区域') /* 弹出窗口'鼠标移出了父亲的盒子区域'*/

// })



/*mouseenter mouseleave 事件， 子元素被移入移出，不会触发父元素的事件 */

// $(".father").mouseenter(function(){ /*选择class叫父亲的div的鼠标移入事件*/

// alert('鼠标进入了父亲的盒子区域') /* 弹出窗口'鼠标进入了父亲的盒子区域'*/

// })

// $(".father").mouseleave(function(){ /*选择class叫父亲的div的鼠标移出事件*/

// alert('鼠标移出了父亲的盒子区域') /* 弹出窗口'鼠标移出了父亲的盒子区域'*/

// })


// $(".father").hover(function(){ /* 同时监听鼠标移入移出的事件用hover 子元素被移入移出，不会触发父元素的事件*/

// console.log('鼠标移入了') /* 移入后调用*/

// }, function(){

// console.log('鼠标移出了') /* 移出后调用*/

// })


$(".father").hover(function(){ /* 同时监听鼠标移入移出的事件用hover 子元素被移入移出，不会触发父元素的事件*/

console.log('鼠标移入移出了') /*鼠标移入和移出都监听了*/

})


})


</script>

</head>

<body>

<div class="father"> <!-- class叫父亲的div盒子 -->

<div class="son"> <!-- class叫儿子的div盒子 -->


</div>


</div>

</body>

</html>

Tags：

猜你喜欢

最近发表
标签列表