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< /code> 包装器上的事件。在 mouseover 中检查：

• 如果事件目标是 .Scroller 项 (li)，则打开或更新 .tickPop< /code>
• 如果事件目标是 .tickPop，则不执行任何
• 操作，否则关闭 .tickPop
  在 mouseleave 中，您知道鼠标已离开整个容器，因此您关闭 .tickBox。

选项2

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

Answer 2

声明一个全局布尔变量“DisplayPopup”。默认值 false
仅在新闻条的鼠标悬停和鼠标输入以及新闻条的每个子项中设置“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/