Scriptaculous的Effect.Appear毛刺的onmouseover

使用Scriptaculous的Effect.Appear()作为一个菜单选项时，我有一个问题，我想创建一个类似Flash的菜单，但与纯CSS和Scriptaculous。Scriptaculous的Effect.Appear毛刺的onmouseover

我已经得到了我想要的结果，当我把鼠标悬停在一个盒子上时，一个文字（与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

<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>

任何帮助表示赞赏:)

来源

2013-04-06 Crays

而不是使用的DIV的onmouseover属性使用事件观察者这样

的

$$('.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-12 15:17:25

Scriptaculous的Effect.Appear毛刺的onmouseover

回答

相关问题