jQuery.vticker.js проблемы с функциями mouseleave, mouseenter

Я вижу 2 варианта:

Опция 1

Оберните свои элементы .Scroller и .tickPop в другой элемент и привяжите события mouseover и mouseleave к оболочке. В mouseover вы проверяете:

• если целью события является элемент .Scroller (li), откройте или обновите .tickPop
• если целью события является .tickPop, ничего не делать
• в противном случае закройте .tickPop А в mouseleave вы знаете, что мышь покинула весь контейнер, поэтому вы закрываете .tickBox.

вариант 2

Добавьте немного setTimeout к закрытию .tickPop на mouseleave и вызовите clearTimeout, если мышь входит в .tickBox или элемент .Scroller.

Объявите глобальную логическую переменную DisplayPopup. значение по умолчанию false Только при наведении курсора мыши и входе мыши в полосу новостей и каждый дочерний элемент полосы новостей установите «DisplayPopup» = true, а также убедитесь, что если для «DisplayPopup» установлено значение «true», вы не меняете его значение. теперь при наведении мыши, вводе мыши и выходе из полосы новостей и каждом дочернем элементе полосы новостей убедитесь, что всплывающее окно установлено на видимое, если «DisplayPopup» = true.

теперь, чтобы закрыть всплывающее окно, у вас есть два варианта

1. кнопка закрытия. за этой кнопкой закрытия установите "DisplayPopup" = false
2. при выходе из всплывающего окна мышью установите «DisplayPopup» = false и закройте всплывающее окно.

Также убедитесь, что всплывающее окно не является дочерним элементом ленты новостей. он просто отображается под ним.

Большое спасибо Ори и Сайеду Салману Акбару за беспокойство и попытку помочь мне. Я попробовал оба метода Ори и одну логику Сайеда Салмана Акбара, но тщетно. Я также пробовал много других вариантов, и, наконец, я получил его.

Проблема заключалась не в функции «mouseleave» полосы LI, которая была и работает нормально. когда mouseleave функция li перерисовывает/восстанавливает цвет и фон LI с настройкой $Box.css('display','none');

Я сделал следующие изменения в кодах.

1. В моем вопросе коды функции наведения всплывающего окна были вложены в функцию «mouseleave» LI. Я поместил функцию $Box.hover из функции LI "mouseleave".

2. Связал функции «mouseenter» и «mouseleave» с $Box, так как это отдельный объект от полосы.

3. В функцию $Box «mouseenter» добавлены коды для перерисовки полосы LI, чтобы создать ощущение, что LI все еще зависает и восстанавливает/перекрашивает LI в функции «mouseleave» в $Box.

посмотрите новые коды:

    if(options.mousePause)
    {
        obj.bind("mouseenter",function(){
            options.isPaused = true;
            $Box.css('width',200);
            obj.children('ul').children('li').css('background','#f0f0f0');
            obj.children('ul').children('li').children('a').css('color','#000');
            var offset = obj.children('ul').children('li').offset();
            $Box.css('left', offset.left);
            $Box.css('top', offset.top+25);
            $Box.css('display','block');
        }).bind("mouseleave",function(){
            options.isPaused = false;
            $Box.css('display','none');
            obj.children('ul').children('li').css('background','transparent');
            obj.children('ul').children('li').children('a').css('color','#ffe300');
        }); // mouseleave function end
    } // if end
    $Box.bind("mouseenter",function(){
        options.isPaused = true;
        isBoxHover = true;
            $Box.css('width',200);
            obj.children('ul').children('li').css('background','#f0f0f0');
            obj.children('ul').children('li').children('a').css('color','#000');
            var offset = obj.children('ul').children('li').offset();
            $Box.css('left', offset.left);
            $Box.css('top', offset.top+25);
            $Box.css('display','block');

    }).bind("mouseleave",function() { 
        options.isPaused = false;
        isBoxHover = false;
        $Box.css('display','none');
        obj.children('ul').children('li').css('background','transparent');
        obj.children('ul').children('li').children('a').css('color','#ffe300');
    }); 

и теперь он работает нормально для меня. Вы можете увидеть результат, посетив страницу: http://tagbees.designforce.us/