Use the: hover pseudo class to replace the js hover event, hover

Use the: hover pseudo class to replace the js hover event, hover

To make a level-2 menu, move the mouse to display the sub-menu, move the mouse out of the sub-menu to hide it, or use the hover event of jquery to hide the sub-menu. For example:

$ (". Nav "). hover (function () {$ ("sub-nav "). addClass ("show") ;}, function () {$ ("sub-nav "). removeClass ("show ");});

The first function implements the style of moving the mouse up, and the second function implements the style of moving the mouse away, so a simple drop-down menu function is implemented.

There was no problem with doing so until yesterday: When the element already has a click event to implement this function, the hover event will implement the same function, and the hover will affect the click event, and remove the Click Event function. For example:

Add the current style for the currently clicked navigation, and then add the current event to the current element that you want to move the mouse to. Then, use the hover event, clicking Add current style will be affected by the hover event, and clicking Add style again will not work.

 

: Hover pseudo class

After a long struggle, I consulted my colleagues. My colleagues said there was no need to use the hover event. I solved it with a pseudo-category, so she was suddenly enlightened under her guidance.

. Nav li. current,. nav li: hover {// css code}

Current is the current style, and then the hover and current share a style, a simple conversion of ideas can solve the problem. Similarly, menu display problems:

. Nav: hover. sub-nav {display: block ;}

Conclusion: Sometimes we need to change our thinking and find the simplest way to implement the problem, instead of staying stuck in the problem.