懸停一個div顯示隱藏的div - jquery轉換爲原型

Question

我一直在嘗試使用Prototype顯示隱藏的div時，懸停在另一個div幾天。 我在jQuery中可以正常工作，但我可以使用一些幫助將它移植到原型。

當我將鼠標懸停在.recent-question上時，我想.interact淡入或至少出現。

$(document).ready(function(){ 
    $(".recent-question").hover(function(){ 
     $(this).find(".interact").fadeIn(2.0); 
    }, function(){ 
     $(this).find(".interact").fadeOut(2.0); 
    });  
}); 

 

<div class="recent-question"> 
    <img src="images/new/img-sample.gif" alt="" width="70" height="60" /> 
    <div class="question-text"> 
     <h3>Heading</h3> 
     <p><a href="#">Yadda Yadda Yadda</p> 
    </div> 
    <div class="interact" style="display:none;"> 
     <ul> 
      <li><a href="#">Choice1</a></li> 
      <li><a href="#">Choice2</a></li> 
      <li><a href="#">Choice3</a></li> 
     </ul> 
    </div> 
</div> 

Answer 1

使用$$（）和用於通過類名遍歷元件各自（）函數。使用script.aculo.us使淡入淡出效果。 Event.obseve（）來處理事件

Answer 2

好的，我的答案是脫離主題，但我會建議你考慮使用jQuery而不是原型。爲什麼？只是因爲jQuery似乎有更多的牽引力和更廣泛的接受，然後Prototype。

我用Prototype和Scriptaculous爲我的網站發現，很難找到可用於jQuery的插件。

根據The State of the Web，78％的專業網頁設計師和開發者調查使用jQuery，相比之下，18％使用原型。

Answer 3

還有一些bug，抱歉:(

詳細的版本：基於http://jsfiddle.net/eRSu2/

：http://mikeconley.ca/blog/2009/02/19/mouseover-mouseout-on-nested-elements/