CODEWITHSUNDEEP
jquery
user1031742
user1031742

Reputation: 424

Element should remain opened on hover

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');
    });
});

Upvotes: 0

Views: 70

Answers (2)

showdev
showdev

Reputation: 29188

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.

Upvotes: 0

Nope
Nope

Reputation: 22339

Without seeing the actual HTML the script relates to the most obvious issue seems to be the use of the css() method.

The css() method takes 2 arguments to set a value:

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

Or you can use show() and hide() if you want too:

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

Upvotes: 2

Related Questions