0

我正在开发一个带有新闻滚动或盲区效果的网站。场景是当用户将鼠标悬停在新闻项目上时，会打开一个弹出框。

我写的代码一切都很好：

    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/并请给我建议以解决此问题。

提前致谢。问候

4

3 回答 3

0

我看到 2 个选项：

选项1

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

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

选项 2

在 onsetTimeout的结尾加一点，如果鼠标进入或者某个项目就调用。.tickPopmouseleaveclearTimeout.tickBox.Scroller

于 2012-01-29T23:02:59.310 回答
0

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

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

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

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

于 2012-01-30T18:05:11.367 回答
0

非常感谢 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/

于 2012-01-30T19:09:22.473 回答