javascript - 将鼠标悬停在 div 上会显示隐藏的 div - jquery 到原型(prototype)的转换

Question

几天来我一直在尝试使用 Prototype 在将鼠标悬停在另一个 div 上时显示隐藏的 div。我在 jQuery 中工作得很好，但我可以使用一些帮助将其移植到原型(prototype)。

当我将鼠标悬停在 .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

$$(".recent-question").each(function(div) {
   div.observe('mouseover', function(e) {
       div.down('.interact').appear(); //FadeIn
   });
   div.observe('mouseout', function(e) {
       var mouse_over_element;
       if (e.toElement) {
           mouse_over_element = e.toElement;
       } else if (e.relatedTarget) {
           mouse_over_element = e.relatedTarget;
       }

       if (mouse_over_element == null) {
           return;
       }
       if (!mouse_over_element.descendantOf(div) && div != mouse_over_element) {
           div.down('.interact').fade(); //FadeOut
       }
   });
});

仍然有一些错误，抱歉:(

详细版本: http://jsfiddle.net/eRSu2/

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