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

WBOY
Release: 2016-06-24 11:43:05
Original
1750 people have browsed it

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");});
Copy after login

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      }
Copy after login

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;}    
Copy after login

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.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template