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

回答

相關問題