JavaScript hide another element on mouseover

Question

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

Answer 1

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

Answer 2

getElementsByClassName returns an array. Try iterating over them.

Answer 3

Try this:

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

It doesn't work because getElementsByClassName() retrieves an array of elements that contain another class. You just have select which element you want.

If the element is only one, you could give it a certain id, like this:

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

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

Answer 4

getElementsByClassName returns a NodeList, not a Node. A NodeList does not have a style property. You can either use the first element in the list only, or you could select by ID instead:

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

Obviously in the second example you need to give the element an ID...