mouseover()与mouseout()区别
普通鼠标移入移出事件
????语法:
????????mouseover()/mouseout()
????功能:
????????当鼠标移入/移出到添加事件的元素或其子元素的时候，都会被触发
!!mouseenter/mouseleave是更好的鼠标移入事件!!
????语法：
????????mouseenter()/mouseleave()
????功能：
????????当鼠标移入/移出到添加事件的元素才会被触发,子元素不会被触发
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style> 7 ????????.father{ 8 ????????????width: 300px; 9 ????????????height: 200px;10 ????????????background-color: #2AB89A;11 ????????????border: 1px solid #cc6600;12 ????????}13 14 ????????.son{15 ????????????width: 100px;16 ????????????height: 100px;17 ????????????background-color:skyblue;18 ????????????border: 1px solid #fff;19 ????????}20 ????</style>21 ????<script src="lib/jquery-1.12.2.js"></script>22 ????<script>23 ????????$(function () {24 ????????????// mouseover25 ???????/* ????$(‘.father‘).mouseover(function () {26 ????????????????console.log("moseouer");27 ????????????});28 29 ????????????// mouseout30 ????????????$(‘.father‘).mouseout(function () {31 ????????????????console.log("mouseout");32 ????????????????$(this).hide();33 ????????????});*/34 35 ????????????$(‘.father‘).mouseenter(function () {36 ????????????????console.log("mouseenter");37 ????????????});38 39 ????????????// mouseout40 ????????????$(‘.father‘).mouseleave(function () {41 ????????????????console.log("mouseleave");42 ????????????????$(this).hide();43 ????????????});44 ????????});45 ????</script>46 </head>47 <body>48 <h1>鼠标移出大盒子的时候才隐藏大盒子</h1>49 <div class="father">50 ????外面的老爹51 ????<div class="son">52 ????????里面的孩子53 ????</div>54 </div>55 </body>56 </html>JQuery--mouseover()与moseout()的区别
原文地址：http://www.cnblogs.com/mrszhou/p/7780099.html