Geek Answers Handbook

JQuery: keep active child open while hovering over it

My question is similar, but different than jquery-hover-menu-when-hovering-over-child-menu-disappears .

I originally had a hover event on li.item that was a bit fancy but did what I needed to do. I switched the hover over the range so that the event activates a text block, rather than a list block, which extends the entire width of the list.

The effect I'm trying to achieve is hovering over ul.sub . I would like for him to continue the animation in the queue from the span.text hover, which displays it but also keeps it open.

What happens is that the mouse leaves the interval, so li.item fires its part of the mouse in a trigger.


jsFiddle Page


HTML

  <ul id="main"> <li class="head">Title Bar</li> <li class="item odd"> <span class="text">A</span> <ul class="sub"> <li>1</li> <li>2</li> </ul> </li> <li class="item even"> <span class="text">B</span> <ul class="sub"> <li>3</li> <li>4</li> </ul> </li> <li class="item odd"> <span class="text">C</span> <ul class="sub"> <li>5</li> <li>6</li> </ul> </li> <li class="item even"> <span class="text">D</span> <ul class="sub"> <li>7</li> <li>8</li> </ul> </li> </ul>


CSS

 /* colors used are not for production; they are used only to enhance the example visual distinction */ #main{width:10em;} .head,.item{border:1px solid black;padding:.5em;} .head{font-weight:bold; background:#336; color:#fff; cursor:pointer;} .item{background:#f90;} .sub{display:none;} .sub li{padding-left:1em;} .text,.sub{cursor:pointer;}


Javascript

  $(document).ready(function(){ // specific here because of other divs/list items $('#main li.item span.text').hover(function(){ $(this).siblings().stop(true,true).toggle('slow'); }); $('li.head').hover(function(){ $(this).parent().find('ul.sub').stop(true,true).toggle('slow'); }); });

Edit:

I think something like that is what I need, however the animation is updated when moving from a sub-block to a range.

 $(document).ready(function(){ // specific here because of other divs/list items $('#main li.item span.text').hover( function(){$(this).siblings().stop(false,true).show('slow');} ,function(){$(this).siblings().stop(true,true).hide('slow');} ); $('#main li.item ul.sub').hover( function(){$(this).stop(false,true).show();} ,function(){$(this).stop(false,true).hide('slow');} ); $('li.head').hover(function(){ $(this).parent().find('ul.sub').stop(true,true).toggle('slow'); }); });
+4
source share
1 answer

Divide the hover behavior into its two components, mouseenter and mouseleave . Also split toggle () into show () and hide () . Bind mouseenter to span.text and mouseleave to li.item :

 $(document).ready(function() { // specific here because of other divs/list items $('#main li.item span.text').mouseenter(function() { $(this).siblings().stop(true, true).show('slow'); }); $('#main li.item').mouseleave(function() { $(this).children("ul").stop(true, true).hide('slow'); }); $('li.head').hover(function() { $(this).parent().find('ul.sub').stop(true, true).toggle('slow'); }); });

Thus, the guidance does not start on the blanks that you need.

+5
source

More articles:


All Articles