Hovering a div shows hidden div - jquery to prototype conversion

Question

I may get killed for this but I have been trying for a few days using Prototype to show a hidden div when hovering over another div. I have this working fine in jquery but I could use some help porting it over to prototype.

The code sample:

<script type="text/javascript">
$(document).ready(function(){
  $(".recent-question").hover(function(){
   $(this).find(".interact").fadeIn(2.0);
  }, function(){
   $(this).find(".interact").fadeOut(2.0);
  });    
});
</script>

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

So basically when I hover over a recent-question div i would like the div.interact to fade in or appear at all. The above code is for jquery but I am required to use prototype for this project. Any help converting would be greatly appreciated.

Thanks!

Answer 1

use $$() and each() functions for traversing elements by classnames. use script.aculo.us to make fadein/fadeout effects. Event.obseve() to handle events

Answer 2

Ok, my answer is off topic but I would recommend you consider using jQuery instead of Prototype. Why? Simply because jQuery seems to have much more traction and wider acceptance then Prototype.

I used Prototype and Scriptaculous for a website of mine only to find out that it's quite hard to find plugins that are readily available for jQuery.

According to The State of the Web, 78% of professional web designers and developers survey use jQuery in comparison to 18% who use prototype.

Answer 3

$$(".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
       }
   });
});

Still have some bugs, sorry :(

Detailed version: http://jsfiddle.net/eRSu2/

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