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懸停內容顯示

回答

相關問題