Question

我正在使用：

    Event.observe(window, 'load', function() {  
$$('li').invoke('observe', 'mouseover', function(event) {
    this.children[0].toggle();
});

$$('li').invoke('observe', 'mouseout', function(event) {
    document.children[0].toggle();
});
    });   

<ul>
  <li>
    <div style="display:hidden;">Hidden Div</div>
    <div>More content that isn't hidden</div>
  </li>
</ul>

当元素被鼠标悬停时，在元素中显示隐藏的div。它部分工作，但我的代码如下所示：

当我翻转li时，它显示隐藏的div，但是如果我翻转第二个div，它会再次隐藏评论，即使这个div在li中。为什么？我发现了this个问题，但它似乎对这种情况无效。

Answer 1

不需要使用原型或javascript，使用css

li.item:hover div.entry {
 display:block
}

li.item div.entry {
 display:none
}

你不要在你的示例代码中使用任何css类，但我强烈建议你这样做

<ul>
  <li class="item">
    <div class="entry">Hidden Div</div>
    <div>More content that isn't hidden</div>
  </li>
</ul>

Answer 2

将一个类添加到要执行切换的div。然后在事件处理程序内部使用this.select（）查找具有该类名的子项。

 <ul>
  <li>
    <div class="hidden">Hidden Div</div>
    <div>More content that isn't hidden</div>
  </li>
</ul>

Event.observe(window, 'load', function() {  
    var lis = $$('li');

    var toggleFunc = function(event) {
        this.select('.hidden').toggle();
    }

    lis.observe('mouseover', toggleFunc);
    lis.observe('mouseout', toggleFunc);
});

Answer 3

快速解决方案是使用this plugin为非IE浏览器添加“mouseEnter”和“mouseLeave”功能。

原型悬停内容和儿童

3 个答案: