jquery mouse strokes in a row

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.