1

使用 scriptaculousEffect.Appear()作为菜单选项时遇到问题，我想创建一个类似 flash 的菜单，但使用纯 css 和 scriptaculous。

我得到了我想要的结果，即当我将鼠标悬停在一个框上时，一个文本（带有display: none;）出现在它上面，并且框改变了高度和背景颜色。现在的问题是，当我的鼠标在框上移动得非常快和疯狂时，文本仍然存在（就像它被选中一样）。

我想要的是，当我将鼠标悬停时，文本会出现，如果我的鼠标不在，文本就会消失。

我的代码

function ShowEffect(element){
   new Effect.Appear(element, 
   {duration:0.3, from:0, to:1.0, queue: 'front'});
}
function HideEffect(element){
   new Effect.Appear(element, 
   {duration:0.2, from:1.0, to:0, queue: 'end'});
}

分区

<div class="lefty" style="width: 90px; margin-right: 2px;">
                <div style="display: none;" id="clicker2text">ABOUT US</div>
                <div style="width: 90px;" onmouseover="ShowEffect('clicker2text')" onmouseout="HideEffect('clicker2text')"></div>
                </div>

任何帮助表示赞赏:)

4

1 回答 1

0

不要使用onmouseoverdiv 上的属性，而是使用这样的事件观察器

$$('.lefty').invoke('observe','mouseover',ShowEffect);
$$('.lefty').invoke('observe','mouseout',HideEffect);

但我认为这会更好，因为您正在观察冒泡到身体的事件，然后如果是正确的元素则对其采取行动。

$$('body').first().observe('mouseover',function(e){
    if(e.findElement().hasClass('lefty'))
    {
        ShowEffect(e.findElement());
    }
    else
    {
        //trigger for all of the menus just to make sure the are hidden
        //instead of stuck on
        $$('.lefty').each(function(element){
            if(element.visible())
            {
                HideEffect();
            }
        });
    }
});

这应该会给你一些想法——看看它是否能解决你的问题。

于 2013-04-12T15:17:25.237 回答