Javascript悬停内容显示

我正在尝试编写一个JS函数（使用rails中的原型），当li被鼠标悬停时，它将在li中显示隐藏的div。每个L1具有唯一的ID号码，就像这样：Javascript悬停内容显示

<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只显示该特定李隐藏elemenst。

我想是这样的：

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>

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

来源

2010-10-29 goddamnyouryan

带标签和悬停？只是使用jquery

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

不是那么简单的提供一个想法

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

来源

2010-10-29 05:44:24 jebberwocky

林不知道这是你唯一的问题，但一个关键的问题是，DOM ID不能以数字开头，你需要以model_name-100之类的东西为前缀。此外，所有id的需要是唯一的。因此，您的内容div需要将那些id转换为像class="even-more-hover-display-content"这样的类......或者，您可以将id前缀与model_name-100-even-more-hover-display-content之类的父元素的id相加。

来源

2010-10-29 05:18:59 prodigitalson

其实我的元素确实以一个前缀开始，我只是为了简洁起见而将它取出。 – goddamnyouryan 2010-10-29 05:22:57

@Ryan：当你选择并采取行动时很重要，这不是一件好事情......可能希望将代码逐字回传，减去保密的事情。 – prodigitalson 2010-10-29 05:25:39

我将开始与.getElementByClass（）---在原1.6

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>

来源

2010-10-29 05:25:39

。。

来源

2010-10-29 05:50:43 pahnin

编辑了字体格式 – pahnin 2010-10-29 06:09:15

Javascript悬停内容显示

回答

相关问题