Use: hover pseudo class instead of JS hover event

Source: Internet
Author: User

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

Related Article

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.