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被调用并且框再次消失。 / p>

请现场查看此页面http://tagbees.designforce.us/，请指教我解决此问题。

提前致谢。此致

Answer 1

我看到两个选项：

选项1

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

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

选项2

在setTimeout的{{1}}关闭时添加一点.tickPop，如果鼠标输入mouseleave或clearTimeout，请致电.tickBox项目。

Answer 2

声明一个全局布尔变量“DisplayPopup”。默认值为false 只有鼠标悬停和鼠标输入新闻条和新闻条的每个子项设置“DisplayPopup”= true，并确保如果“DisplayPopup”设置为“true”，则不更改其值。现在在鼠标悬停中，鼠标进入并离开新闻条并且新闻条的每个子项都确保如果“DisplayPopup”= true，则弹出窗口设置为可见。

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

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

同时确保弹出窗口不是新闻条的子项。它只是显示在它下面。

Answer 3

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

问题不在于条带LI“mouseleave”功能，而且工作正常。当mouseleave li函数重新绘制/恢复LI颜色和背景时设置$ Box.css（'display'，'none'）;

我在代码中做了以下更改。

在我的问题中，弹出框悬停功能代码嵌套在LI的“mouseleave”功能中。我把$ Box.hover函数放在LI“mouseleave”函数中。
将“mouseenter”和“mouseleave”函数与$ Box绑定，因为它是条带中的单独对象。
在$ 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/

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

3 个答案:

选项1

选项2