共同点：都是鼠标进入进出时会触发的回调函数。
不同点：进入子元素是否会触发：
demo
<!DOCTYPE html>
<html>
<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>Document</title><style>#outside { width: 300px; height: 300px; border: 1px solid #666}#outside #inner { width: 100px; height: 100px; background: #ccc;}</style><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script type="text/javascript">$(document).ready(function() {$('#inner').mouseover(() => {console.log( 'mouseover被触发' );}).mouseout(() => {console.log( 'mouseout被触发' );});$('#inner').mouseenter(() => {console.log( 'mouseenter被触发' );}).mouseleave(() => {console.log( 'mouseleave被触发' );});});</script>
</head>
<body><div id="outside"><div id="inner"></div></div>
</body>
</html>
通过运行此例子中可以看出：
- 在一个嵌套的div中，鼠标移入到id为outside的div中会触发mouseover和mouseenter事件；
- 鼠标移入到id为inner的div中时，只会触发mouseout事件而不会触发mouseleave事件；
- 如果是从inner移入到outside中，会再次触发一次mouseover事件。
- 只有当鼠标从outside离开时，才会触发mouseleave事件。