Question

我正在尝试编写一个JS函数（在rails中使用原型），当li被鼠标悬停时，它将在li中显示隐藏的div。每个li都有一个唯一的id，这是一个数字，如下所示：

<li id="100">
  <div style="display:none;" id="hover-display-content">Content</div>
  <div style="display:none;" id="more-hover-display-content">Content</div>
  <div style="display:none;" id="even-more-hover-display-content">Content</div>
</li>

我不知道如何去做这件事，特别是在JS只显示特定li的隐藏元素的情况下。

我在想：

Event.observe(window, 'load', function() {  
  Event.observe($("li"), 'mouseover', function() {
     var id = readAttribute("id")
     id.getElementById("hover-display-content").style.display = "inline"; 
     id.getElementById("more-hover-display-content").style.display = "inline";
     id.getElementById("even-hover-display-content").style.display = "inline";
  });  
Event.observe($("li"), 'mouseout', function() {  
     var id = readAttribute("id")
     id.getElementById("hover-display-content").style.display = "none"; 
     id.getElementById("more-hover-display-content").style.display = "none";
     id.getElementById("even-hover-display-content").style.display = "none";
});  
});

但它似乎没有起作用。我哪里错了？

修改

我现在正在使用：

    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>

当我翻转li时，它显示隐藏的div，但是如果我翻转第二个div，它会再次隐藏评论，即使这个div在li中。为什么呢？

Answer 1

带标签和悬停？只是提供一个想法

<html>
<head>
<style>
a div{display:none; height:10px;}
a:hover div{display:inline;}
</style>
</head>
<body>
<ul>
  <li><a>a<div id="hover-display-content">Content</div></a></li>
  <li><a>s<div id="more-hover-display-content">Content1</div></a></li>
  <li><a>d<div id="even-more-hover-display-content">Content2</div></a></li>
</ul>  
</body>
</html>

Answer 2

我不确定这是否是你唯一的问题，但一个关键的问题是DOM id不能以数字开头，你需要在model_name-100之类的前缀加上前缀。此外，所有id都必须是唯一的。因此，您的内容div需要将id转换为class="even-more-hover-display-content"等类...或者您也可以使用id的jsut为id添加前缀像model_name-100-even-more-hover-display-content这样的父元素。

Answer 3

我将从Proto 1.6中弃用的.getElementByClass（）开始

Link here.

作为后备计划，这是常规JS中的概念验证：

<li onmouseover="this.children[0].style.display = 'inline';
                 this.children[1].style.display = 'inline';"> 
   <div id="testdiv" style="display:none;background:blue">test</div>
   <div id="testdiv" style="display:none;background:blue">test</div>
</li>

Answer 4

使用jquery

$('#id').each(function(){
$(this).css({diplay:'inline'});});

并不那么简单。。

Javascript悬停内容显示

4 个答案: