Question

I try to show an element X on mouseenter element Y and to hide it on mouseleave element Y.

So far it works OK.

In addition to that I would like element X after hovering over it, to stay opened.
After hovering out of element X, it should be hidden.

Can you please help me to find out where is problem in the code?
(I use jquery 1.3.2)

$(document).ready(function () {
    $('.kukuk').mouseenter(showBox).mouseleave(hideBox);

    function showBox(e) {
        $('.kuk-blok').fadeIn().css(({
            left: 0,
            top: 30
        }));
    }

    function hideBox() {
        $('.kuk-blok').fadeOut();
    }

    $(".kuk-blok").hover(function () {
        $(this).css('display:block');
    }, function () {
        $(this).css('display:none');
    });
});

Answer 1

As for the “staying open” part, I use a mixture of hover() and delay().

When the mouse leaves elementX, delay the hiding of elementY.
This provides enough time to move the mouse to elementY before hiding it.
When the mouse enters elementY, its hiding animation is cancelled and it remains visible.
When the mouse leaves elementY, it hides itself.

$('#elementX').hover(
  function() { $('#elementY').stop(true,true).fadeIn('fast'); },
  function() { $('#elementY').stop(true,true).delay(350).fadeOut('fast'); }
);

$('#elementY').hover(
  function() { $(this).stop(true,true).show(0); },
  function() { $(this).stop(true,true).delay(150).fadeOut('fast'); }
);

Here’s a jFiddle.