Use: hover pseudo class instead of JS hover event

To make a level two menu to achieve mouse movement up to show submenus, mouse out of the submenu hidden, or other similar requirements, I would first think of jquery hover event to achieve, such as:

$ (". Nav"). Hover (function() {    $ ("Sub-nav"). AddClass ("show"),function () {    $ ("Sub-nav"). Removeclass ("show");});

The first function implements the mouse to move up the style, the second function realizes the mouse to move the style, thus realizes the simple drop-down menu function.

There was no problem with doing this before, but until yesterday there was a problem: when the element already had the click event to implement this function, the same functionality as the hover event was implemented, the hover affected the click event and removed the function of the Click event. As an example:

A navigation that adds the current style to the currently clicked navigation, and then adds the current event to the existing element where the mouse is moved, and then uses the hover event, which is affected by the hover event by clicking on the add-on style, and clicking Add Style again is invalid.

: Hover pseudo-Class

Tangled half a day, consulted a colleague, colleagues said there is no need to use the hover event ah, with pseudo-class to solve, so under her guidance enlightened.

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

Current is the style that is currently needed, and then using: hover is a common style with the present, and a simple conversion of one idea can solve the problem. Similarly, the menu displays the problem:

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

Summary: Sometimes you need to change your mind and find the simplest way to implement the problem, rather than always struggling with the problem.

Use: hover pseudo class instead of JS hover event