The difference between MouseEnter (FN) and MouseLeave, MouseOver and Mouseout

$ ('. Box1 '). MouseEnter (function () {//Piercing event mouseenter$ (this). CSS (' background ', ' red ');}). MouseLeave (function () {$ (this). CSS (' background ', ' green ');})

Look at one more piece:

This seems to be the difference between moving in and moving out of events. What happens if you add a layer to the. box1???

<div class= "Box1" ><p></p></div><div class= "Box2" ></div> $ ('. Box1 '). MouseOver ( function () {   //child node will be triggered
$ ('. Box2 '). HTML (function (Index,value) {
return value + ' 1 ';
});
});

Effect

You can see the gray area (P tag) and trigger the mouseover,

Looking at MouseEnter:

<div class= "Box1" ><p></p></div><div class= "Box2" ></div> $ ('. Box1 '). MouseEnter (function () {   //child nodes are not triggered by  $ ('. Box2 '). HTML (function (index,value) {   return value + ' 1 ';  });});

It can be concluded that mouseover triggers child nodes, while MouseEnter does not trigger child nodes.

So the difference between mouseout and MouseLeave is not so, after testing the same, no longer too cumbersome.

Summary: In a layer time, mouseover, Mouseout and MouseEnter, MouseLeave of no difference

In multiple layers, the two groups are essentially different, pay attention to the use of the situation

The difference between MouseEnter (FN) and MouseLeave, MouseOver and Mouseout