JavaScript在mouseover上隱藏另一個元素

所以我有這個JavaScript我正在處理，並且我想在mouseover上顯示/隱藏另一個HTML元素，但它不會工作。這裏的HTML：JavaScript在mouseover上隱藏另一個元素

<div class='post' onmouseover="document.getElementsByClassName('another_element').style.display='inline';" onmouseout="document.getElementsByClassName('another_element').style.display='none';">

來源

2011-02-15 Web_Designer

除非有特殊理由，否則我會建議使用JS庫如jQuery，因爲它使這樣的事情容易得多。此外，他們還處理您可能遇到的任何跨瀏覽器問題。 – Chris 2011-02-15 23:51:22

我剛一個想法，並找到一個簡單的解決方案。感謝你們所做的貢獻。這是我想出來的。我可以爲每個要顯示/隱藏的元素設置一個唯一的ID，併爲每個元素使用getElementById，而不是使用getElementsByClassName，並且必須遍歷數組。因此，它結束了是這樣的：

onmouseover="document.getElementById('an_element').style.display='inline'; document.getElementById('another_element').style.display='inline';" 
onmouseout="document.getElementById('an_element').style.display='none'; document.getElementById('another_element').style.display='none';"

來源

2011-02-25 06:53:54

getElementsByClassName方法返回一個數組。嘗試迭代它們。

來源

2011-02-15 23:38:09 sankargorthi

我希望所有具有指定類的元素都將這個JavaScript應用到它們，所以有人可以告訴我如何遍歷它們或其他更簡單的方法？提前致謝！ – 2011-02-16 00:01:32

試試這個：

<div class='post' onmouseover="document.getElementsByClassName('another_element')[0].style.display='inline';" onmouseout="document.getElementsByClassName('another_element')[0].style.display='none';">

它不工作，因爲getElementsByClassName方法（）檢索包含another類元素的數組。你只需要選擇你想要的元素。

如果元素只有一個，你可以給它一個特定的ID，如：

<div id="another_element"></div> 

<div class='post' onmouseover="document.getElementById('another_element').style.display='inline';" onmouseout="document.getElementById('another_element').style.display='none';">

來源

2011-02-15 23:38:09

getElementsByClassName返回NodeList，而不是一個Node。 A NodeList沒有樣式屬性。您可以只使用第一個元素在列表中，或者你可以通過ID而不是選擇：很顯然，在你需要給元素的ID第二個例子

<div class='post' onmouseover="document.getElementsByClassName('another_element')[0].style.display='inline';" onmouseout="document.getElementsByClassName('another_element')[0].style.display='none';"> 

<div class='post' onmouseover="document.getElementsById('another_element').style.display='inline';" onmouseout="document.getElementsById('another_element').style.display='none';">

...

來源

2011-02-15 23:39:12 lonesomeday

JavaScript在mouseover上隱藏另一個元素

回答

相關問題