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

Question

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

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, который скользил вниз.

РЕДАКТИРОВАТЬ: Вот JSFiddle с кодом: http://jsfiddle.net/qeLVU/2/

Answer 1

используя 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/

Answer 2

Ваш код выглядит так, будто вы немного обдумали это. Просто скользите вниз или вверх, когда вы наводите 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/