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

$$(".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/

Answer 2

使用$$（）和each（）函数按类名遍历元素。使用script.aculo.us制作淡入/淡出效果。 Event.obseve（）来处理事件

Answer 3

好的，我的答案不是主题，但我建议您考虑使用jQuery而不是Prototype。为什么？仅仅因为jQuery似乎有更多的牵引力和更广泛的接受，然后Prototype。

我在我的网站上使用Prototype和Scriptaculous只是为了发现很难找到随时可用于jQuery的插件。

根据The State of the Web，78％的专业网页设计师和开发人员调查使用jQuery，而18％使用原型。

悬停div显示隐藏的div - jquery到原型转换

3 个答案: