CODEWITHSUNDEEP
javascriptjqueryhtml
DragonGamer
DragonGamer

Reputation: 900

hover(): Trigger only when leaving foreign element

am constructing a slightly more complex drop down menu system using Jquery's slideDown() and slideUp() animations as well as the "hover()" event.

Now I have a certain element which triggers by "hover()", that another element is being displayed. Unfortunately it's not possible to make those two elements, the only childs of another element (since the trigger is in another table).

Still I want this new element which has been displayed, to show until my mouse leaves BOTH the new element as well as the trigger element.

Is there a way to achieve this?

Thanks in advance :)

Upvotes: 0

Views: 55

Answers (1)

fuyushimoya
fuyushimoya

Reputation: 9813

I used .mouseenter and .mouseleave to achieve what may you want: jsFiddle

var groups = {};
groups[1] = {
    main: false,
    sub: false
};
$('.menu').mouseenter(function(e) {
    var $target = $(e.target);
    var group = $target.attr('data-group');
    var type = $target.attr('data-type');
    if (!(groups[group].sub || groups[group].main)) {
        $('.sub[data-group='+ group +']').toggle(true);
    }
    groups[group][type] = true;
});

$('.menu').mouseleave(function(e) {
    var $target = $(e.target);
    var group = $target.attr('data-group');
    var type = $target.attr('data-type');
    groups[group][type] = false;
    if (!(groups[group].sub || groups[group].main)) {
        $('.sub[data-group='+ group +']').toggle(false);
    }
});

Just track the group of main and sub item. A little ugly, but hope it may helps.

Upvotes: 1

Related Questions