Simple OnMouseOver Visibility:Visible Doesn't Work

Hello.

I have a simple DIV tag with the following code:

<div id="fp323" onmouseover="setVisibility('fp323', 'inline');" 
style="visibility:hidden;margin:0;padding:0;">
Some Text Here</div>

HTML:

I also have this JS function before the above tag:

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

Code (markup):

However, when I hover the Div, nothing happens, meaning the text doesn't show.

 

It won't trigger onMouseOver/Out events if the element is not visible. You could wrap it with other div and add events to that div, so it modifies it's child properties.

 

This worked. Thanks!

<div OnMouseOver="setvisibility('unique_id','inline');" OnMouseOut="setvisibility('unique_id','none');">
  <div id="unique_id" style="display:none">Some text here that will be displayed on mouse hover and hidden when mouse is removed from it.</div>
</div>

HTML:

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

Code (markup):