Use:hover pseudo-class to replace js's hover event_html/css_WEB-ITnose

To make a secondary menu, if you want to move the mouse up to display the submenu, move the mouse out to hide the submenu, or other similar needs, first I will think of using jquery's hover event, such as:

$(".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, thus realizing a simple drop-down menu function.

I have been doing this without any problems before, but I encountered a problem yesterday: when the element already has a click event to implement this function, and then use the hover event to implement the same function, the hover event will affect the click event and be removed. Click event function. For example:

A navigation, add current style to the currently clicked navigation, and then add a current event to the current element that the mouse moves to, then use the hover event, and the current style added by clicking will Affected by the hover event, and clicking again to add the style is invalid.

: hover pseudo-class

After struggling for a long time, I asked a colleague for advice. The colleague said that there is no need to use the hover event. It can be solved by using the pseudo-class, so in Under her guidance, I suddenly became enlightened.

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

current is the currently required style, and then use :hover to share the same style with current. A simple conversion of ideas can solve the problem. In the same way, the menu displays the problem:

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

Summary: Sometimes you need to change your thinking and find the simplest way to solve the problem instead of being entangled in the problem all the time.