<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; background: red; } .son{ width: 100px; height: 100px; background: blue; } </style> <script src="./jquery-1.10.1.min.js"></script> </head> <body> <script> /* mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件 */ $(function() { /* $(".father").mouseover(function () { console.log("father被移入了"); }); $(".father").mouseout(function () { console.log("father被移出了"); }); */ /* mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件 推荐大家使用 */ /*$(".father").mouseenter(function () { console.log("father被移入了"); }); $(".father").mouseleave(function () { console.log("father被移出了"); });*/ $(".father").hover(function() { console.log("father被移入了"); },function() { console.log("father被移出了"); }); }); </script> <div class="father"> <div class="son"></div> </div> </body> </html>
jQuery第三十篇 移入移出事件
关注
打赏