Не скрывать элемент при зависании

Question

У меня есть элемент, который должен быть скользким, когда другой элемент зависнет и останется видимым, когда он зависает над собой. Из-за проблем, связанных с дизайном с большим количеством перекрывающихся элементов и интенсивным использованием z-индекса, я не могу вставить скользящий элемент внутри зависающего элемента; они не могут быть братьями и сестрами.

HTML-:

<div class="a"> 
    <div class="b"> 
     <div class="c"> 
      <nav class="navvy"> 
       <ul> 
        <li class="active"> 
         <a href="#" class="one">One</a> 
        </li> 
        <li> 
         <a href="#" class="two">Two</a> 
        </li> 
       </ul> 
      </nav><!--nav-1--> 
     </div><!--c--> 
    </div><!--b--> 
</div><!--a--> 
<div class="slidedown slidedown-one"> 
    <div class="slide-content"> 
     One - text. 
    </div><!--slide-content--> 
</div><!--slidedown--> 
<div class="slidedown slidedown-two"> 
    <div class="slide-content"> 
     Two - text. 
    </div><!--slide-content--> 
</div><!--slidedown--> 

JQuery (примечание: Я использую плагин hoverIntent):

//Hide all slidedown divs 
$('.slidedown').hide(); 

//Find the active class 
var activeCl = $('.navvy').children('ul').find('.active').children('a').attr('class').split(' ')[0]; 

//Slide it down 
var downSlide = function() { 
    activeCl = $(this).attr('class').split(' ')[0]; 
    $('.slidedown-'+activeCl).slideDown(1000); 
}; 

//Slide it up 
var upSlide = function() { 
    activeCl = $(this).attr('class').split(' ')[0]; 
    $('.slidedown-'+activeCl).delay(1000).slideUp(1000); 
}; 

//Slide on hover 
var slideHover = function() { 
    $('.navvy').children('ul').find('li').children('a').hoverIntent({ 
     over: downSlide, 
     out: upSlide 
    }); 
}; 
slideHover(); 

Он скользит вверх и вниз в порядке, но мне нужно, чтобы не скользить назад снова, когда мышь находится внутри div, который скользнул вниз.

EDIT: Вот JSFiddle с кодом: http://jsfiddle.net/qeLVU/2/

Answer 1

Ваш код выглядит, как вы над думая, что это немного. Просто двигайтесь вниз или вверх, когда вы наводите или выключаете связь nav, а также с самим div.

$('.nav-1 ul li a').hover(function() { 
    $('.slidedown-' + this.className).stop().slideDown(); 
}, function(){ 
    $('.slidedown-' + this.className).stop().slideUp(); 
}); 

$('.slidedown').hover(function() { 
    $(this).stop().slideDown(); 
}, function(){ 
    $(this).stop().slideUp(); 
}); 

http://jsfiddle.net/cJWn8/

Answer 2

использованием hoverIntent

На вашем hoverIntent, он не знает, он должен также работать над содержанием, вы должны позволить ей знать, что вы хотите. $('.navvy').children('ul').find('li').children('a').hoverIntent должен быть больше похож на $('.navvy li').hoverIntent с содержимым слайда внутри li, чтобы они запускали события наведения.

поэтому HTML будет больше похож:

<nav class="navvy"> 
    <ul> 
     <li> 
      <a href="#">Home</a> 
      <div>One - text.</div> 
     </li> 
     <li> 
      <a href="#">About</a> 
      <div>Two - text.</div> 
     </li> 
    </ul> 
</nav> 

Тогда JQuery становится намного легче, и вы можете сделать что-то вроде:

$('.navvy li').hoverIntent({//on common parent 
    over: function() { 
     $(this).addClass('active')//add active 
     .children('div').stop(true,true).slideDown('slow');//slide down 
    }, 
    out: function() { 
     $(this).removeClass('active')//remove active 
     .children('div').stop(true).slideUp('fast');//slide up 
    } 
}); 

сделал скрипку: http://jsfiddle.net/filever10/TCY78/

jquery без намерения или изменения html

Если вы не можете изменить html в этом случае или не хотите переупорядочивать его, то что-то вроде этого будет работать на существующих html.

$('.navvy a').each(function(i) {//i gives you the index of the element 
    var cl = $(this),//current link 
     cc = $('.slidedown').eq(i),//current content 
     dl = 0,//initial delay 
     spd = 500,//speed 
     tim = 250;//timeout 
    cl.add(cc).hover(function() {//hover on 
     !$('.slidedown:visible').length?dl=0:dl=spd;//set delay 
     clearTimeout(cl.data('timer'));//clear timer 
     cl.parent('li').addClass('active');//active on 
     cc.stop(true,true).delay(dl).slideDown(spd);//slide down 
    }, function() {//hover off 
     cl.parent('li').removeClass('active');//active off 
     var timer = setTimeout(function() {//timeout 
      cc.stop(true).slideUp(spd);//slide up 
     }, tim);//delay 
     cl.data('timer', timer);//set timer 
    }); 
}); 

сделал скрипку: http://jsfiddle.net/filever10/xn85z/