JQuery Hover на двух отдельных элементах - PullRequest
Новая
       22

JQuery Hover на двух отдельных элементах

1 голос
/ 05 января 2012

У меня есть два отдельных элемента настройки, которые появляются в разных частях DOM - проблема, с которой я сталкиваюсь, заключается в том, что они абсолютно позиционированы, и я не могу обернуть их в контейнерный элемент.

Я настроил JSfiddle здесь - http://jsfiddle.net/sA5C7/1/

Что я пытаюсь сделать: переместить элементы внутрь и наружу вместе - чтобы пользователь мог перемещать свою мышь между любым элементом и ТОЛЬКО после того, как он покинул ОБА, он снова скрылся бы?

Как мне это настроить? Потому что в данный момент, когда я удаляю один элемент - запускается «событие отпуска» для этого элемента и т. Д.

Ответы [ 2 ]

4 голосов
/ 05 января 2012

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

И только когда оба ложны при выходе => скрывать элементы. 

$(document).ready(function(){
    var bslider = false;
    var btest = false;
    $('#slider').mouseover(function() {
        bslider = true;
        $('#slider, #test').stop(true,false).animate(
                    {'margin-left':'20px'
                    });
    });
    $('#test').mouseover(function() {
        btest = true;
        $('#slider, #test').stop(true,false).animate(
                    {'margin-left':'20px'
                    });
    });
    $('#slider').mouseout(function() {
        bslider = false;
        if(!bslider && !btest)
        {
            $('#slider, #test').stop(true,false).animate(
                    {'margin-left':'0'
                    });
        }
    });
    $('#test').mouseout(function() {
        btest = false;
        if(!bslider && !btest)
        {
            $('#slider, #test').stop(true,false).animate(
                    {'margin-left':'0'
                    });
        }
    });
});
0 голосов
/ 08 апреля 2019

Принятое решение прекрасно работает. Чтобы немного упростить и привести пример.

https://jsfiddle.net/ngb1q3kp/2/

$(function(){
    var sliderHover = false;
    var testHover = false;
    $("#slider").hover(function() {
        sliderHover = true;
        doHover();
    }, function() {
        sliderHover = false;
        checkHide();
    });
    $("#test").hover(function() {
        testHover = true;
        doHover();
    }, function() {
        testHover = false;
        checkHide();
    });
    function doHover() {
        $('#slider, #test').stop(true,false).animate({'margin-left':'285px'});
    }
    function checkHide() {
        if (!sliderHover && !testHover) {
            $('#slider, #test').stop(true,false).animate({'margin-left':'0'});
        }
    }
});

Если вы хотите более обобщенный пример. Это может легко обрабатывать более двух элементов: https://jsfiddle.net/q6o2v8fz/

...