Search code examples
javascripthtmlhideonmouseoveronmouseout

JavaScript hide another element on mouseover

So I have this JavaScript I am working on, and I want to show/hide another HTML element on mouseover but it wont work. Here's The HTML:

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

  • I just had a thought, and found a simple solution. Thanks all of you guys for your contributions. Here's what I came up with. I can set a unique id to each element I am going to show/hide, and use getElementById for each one instead of using the getElementsByClassName and having to loop through the array. So It ends up like this:

    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';"