Detailed explanation of the conflict between hover and click events in jQuery (picture)

I slowly realized that I had written a lot of notes. I was browsing the web page today and thought about whether I should post it to my blog to share with everyone. Although I am not a big expert, there are still some small things. My experience ~ I hope to share it with everyone, it’s funny!

We have a li that now needs one click to change and another to remain You can hover

The product will change color after being clicked, and merchants can still hover.

The undesirable method is:

(1) JQ Add Click event to change its css() This method is not available, because modifying background-color through javascript will overwrite all background-color properties defined in css, including of course background- under hover. color attribute, so when writing a click event, the hover event will be invalid.

(2) If JQ uses the addClass() method, it will involve priority issues.

(3) It is still not possible to use JQ's hover() in js.

The preferred method is:

(1) You can write two CSS in advance Style sheet, and a hover style

and then write it in JS. This time we use attr() in JQ to directly If the class names of the two li are changed, they will not involve a series of other problems.

##(2) You can also add ## in the CSS hover # !important; For example:

# #　:hover{ color: #FF6C00 !important;}

The above is the detailed content of Detailed explanation of the conflict between hover and click events in jQuery (picture). For more information, please follow other related articles on the PHP Chinese website!