Cleartimeout Eliminate flashing

Requirements: When the mouse is placed above the parent menu, the submenu below is displayed. When the mouse moves away from the submenu or parent menu, the submenu is closed. The final effect is as follows:

PS: This is a common requirement, and the most common practice is to nest a UL element underneath the LI element to contain child elements. This approach can be completely controlled with CSS. But today this submenu is separate from the navigation bar. The Header-tags block is displayed when the mouse is over the product.

  <ulclass= "header-nav">                            <Liclass= "Nav-item Home"><ahref= "@Url. Action ("Index "," Home ")">Home</a></Li>                            <Liclass= "Nav-item Products"ID= "Header_tags">                                <ahref="#">Products<spanclass= "Icon-caret-down"></span></a>  ....                            </Li></ul><Divclass= "header-tags">                            <ul>                                <Li>                                    <imgclass= "Screening-img-normal"src= "~/content/static/all.png">                                    <imgclass= "Screening-img-hover"src= "~/content/static/all1.png">                                    <P>All</P>                                </Li>                                <LiTagID= "4">                                    <imgclass= "Screening-img-normal"src= "~/content/static/shafa.png">                                    <imgclass= "Screening-img-hover"src= "~/content/static/shafa1.png">                                    <P>Sofa</P>                                </Li>                                <LiTagID= "3">                                    <imgclass= "Screening-img-normal"src= "~/content/static/zuoyi.png">                                    <imgclass= "Screening-img-hover"src= "~/content/static/zuoyi1.png">                                    <P>Seat</P>                                </Li>....</Div>

This cannot be fully controlled with CSS (hover can only control child elements or sibling elements).

/* Father */ #a: Hover #b {Display: block/* brother */#a: hover + #b{display:  Block}

The above situation is going to use a script. This involves moving the #header_tags and. Header-tags two elements into the move. When the mouse moves into the #header_tags,.header-tags display, when the mouse is moved into the. Header-tags, the #header_tags Moveout event cannot be triggered immediately, while the tags continue to display. Only the mouse from #header_tags and. Header-tags left without re-entry before the menu will be closed.

$(function () {        varTagstime; $ (document). On (' MouseOver mouseout ', ' #header_tags ',function(event) {var$headerTagsBox = $ ('. Header-tags ')); if(Event.type = = ' MouseOver ') { cleartimeout(tagstime); $headerTagsBox. Slidedown (300); }            Else if(Event.type = = ' Mouseout ') {Tagstime= SetTimeout (function() {$headerTagsBox. Slideup (200); }, 200);        }        }); $('. Header-tags '). Hover (function() {cleartimeout (tagstime); },function(){            var$me = $ ( This); tagstime = SetTimeout (function() {$me. Slideup (200); }, 200);    }); });

If the timer is not cleared here and the delay is executed, the navigation bar will flash continuously. cannot be clicked at all.

Cleartimeout Eliminate flashing