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

Question

Я занимаюсь разработкой веб-сайта с прокруткой новостей вверх или слепым эффектом в полосе.Сценарий: когда пользователь наводит указатель мыши на новость, открывается всплывающее окно.

Все идет хорошо с кодами, которые я написал:

    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(){

            $Box.hover(function(){
                options.isPaused = true;
            },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');
            });

            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

Все хорошо, но когда я нахожуотображается окно с новостями, но я не могу навести указатель мыши на поле, так как указатель мыши покидает полосу новостей, вызывается указатель мыши vticker.js, и окно снова исчезает.

Пожалуйста, проверьте эту страницу в прямом эфире http://tagbees.designforce.us/ и, пожалуйста, дайте мне совет, чтобы решить эту проблему.

Заранее спасибо.Привет

Answer 1

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

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

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

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

Answer 2

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

Проблема не в функции LI "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/

Answer 3

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

вариант 1

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

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

option 2

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