jquery mouse strokes in a row

Let's talk a little about jquery in a nutshell today. First, what can you think of?

1:hover

2:mouseenter/mouseleave

3:mouseover/mouseout.

It's a three-way approach, first of all, about how they're used.

12345

$(".evo").hover(function(){    $(this).addClass("red");　　　　　　 },function(){     　　$(this).removeClass("red");    　　 })

It's a little messy, so write it down.

$ (""). Hover (function () {        },function () {                    })

In fact, a little bit of code, a total of two function, is because of the row, the first function is defined by the effect of the stroke, the second function defines the effect of the underline.

Look at the second kind.

　　

$ (". Evo"). MouseEnter (function () {    $ (this). AddClass ("Red");         })        $ (". Evo"). MouseLeave (function () {            $ (this). Removeclass ("Red");        })

Let's take a look at the third Kind

　　

$ (". Evo"). MouseOver (function () {    $ (this). AddClass ("Red");         })         $ (". Evo"). Mouseout (function () {            $ (this). Removeclass ("Red");         })

To say their differences, the difference between the three is actually just the difference between the two, first hover in fact and Mouseenter+mouseleave is the same, literally can be understood, one is the mouse into, one is the mouse away, and mouseover/ The difference between mouseout and them is above, the general situation is not easy to see, but give them trigger element inside has child element can see effect,.

When using hover or mouseenter/mouseleave, the mouse moves to the element when it triggers the time, and when the element is moved to the child element, it will not be triggered again.

But the mouseover/mouseout is different, the mouse moves to the element when the time will be triggered, moved from the element to the child element will be triggered, the children moved to the parent element will be triggered again, will continue to trigger.

Hover or Mouseenter/mouseleave will only be triggered once. The mouse is not triggered again as long as it is active within the element and its parent element.

jquery mouse strokes in a row