jQuery.vticker.js mouseleave, mouseenter 函数问题

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 函数 mouseleave 并且框再次消失。

请实时查看此页面http://tagbees.designforce.us/，请给我建议以解决此问题。

提前致谢。 问候

Answer 1

我看到了 2 个选项：

选项 1

将.Scroller 和.tickPop 元素包装在另一个元素中，并在包装​​器上绑定mouseover 和mouseleave 事件。在mouseover 你检查：

• 如果事件目标是.Scroller 项目（li），则打开或更新.tickPop
• 如果事件目标是.tickPop，什么也不做
• 否则，关闭.tickPop 而在mouseleave 中你知道鼠标已经离开了整个容器，所以你关闭了.tickBox。

选项 2

在mouseleave 的.tickPop 的结尾添加一点setTimeout，如果鼠标进入.tickBox 或.Scroller 项，则调用clearTimeout。

Answer 2

声明一个全局布尔变量“DisplayPopup”。默认值假 仅在新闻条的鼠标悬停和鼠标输入以及新闻条的每个子项设置“DisplayPopup”=true 时，还要确保如果“DisplayPopup”设置为“true”，您不会更改其值。 现在在新闻条的鼠标悬停、鼠标进入和鼠标离开以及新闻条的每个子项中，如果“DisplayPopup”=true，请确保将弹出窗口设置为可见。

现在要关闭弹出窗口，您可以有两个选项

1. 关闭按钮。在这个关闭按钮后面设置“DisplayPopup”=false
2. 鼠标离开弹出窗口设置“DisplayPopup”=false 并关闭弹出窗口。

还要确保弹出窗口不是新闻条的子项。它只是显示在它的下方。

Answer 3

非常感谢 Ori 和 Syed Salman Akbar 关心并试图帮助我。我尝试了 Ori 的两种方法和 Syed Salman akbar 的一种逻辑，但徒劳无功。我还尝试了许多其他选择，最后我得到了它。

问题不在于条带 LI 的“mouseleave”功能，该功能过去和现在都可以正常工作。当 mouseleave li 函数通过设置 $Box.css('display','none'); 来重新绘制/恢复 LI 颜色和背景；

我对代码进行了以下更改。

1. 在我的问题中，弹出框悬停功能代码嵌套在 LI 的“mouseleave”功能中。我把 $Box.hover 函数从 LI "mouseleave" 函数中去掉了。

2. 将“mouseenter”和“mouseleave”函数与 $Box 绑定，因为它是与 strip 分开的对象。

3. 在 $Box 的“mouseenter”函数上添加了代码来重新绘制条形 LI，以使 LI 仍然悬停，并在 $Box 的“mouseleave”函数上恢复/重新绘制 LI。

看看新代码：

    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/