I have a hyperlink on my page. I want to show a div when I mouse over the hyperlink, and hide it when I mouseout.

My html:

<a onmouseover="showDiv(this)" onmouseout="hideDiv(this)">
    <img>
    <div class="inner-block">
         Content
    </div>
</a>

Javascript:

function showDiv(elem) {
    elem.getElementsByTagName("div").style.visibility="visible";
}

function hideDiv(elem) {
    elem.getElementsByClassName("inner-block2").style.visibility="hidden";
}

and CSS:

.inner-block {
    visibility: hidden
}

I've tried getElementsByTagName, getElementsByClassName, whatever I try I get

Uncaught TypeError: Cannot set property 'visibility' of undefined

I have a hyperlink on my page. I want to show a div when I mouse over the hyperlink, and hide it when I mouseout.

My html:

<a onmouseover="showDiv(this)" onmouseout="hideDiv(this)">
    <img>
    <div class="inner-block">
         Content
    </div>
</a>

Javascript:

function showDiv(elem) {
    elem.getElementsByTagName("div").style.visibility="visible";
}

function hideDiv(elem) {
    elem.getElementsByClassName("inner-block2").style.visibility="hidden";
}

and CSS:

.inner-block {
    visibility: hidden
}

I've tried getElementsByTagName, getElementsByClassName, whatever I try I get

Uncaught TypeError: Cannot set property 'visibility' of undefined

• javascript
• html
• css
• onmouseover
• onmouseout

Share Improve this question Follow asked Aug 14, 2012 at 16:53 codesw1tchcodesw1tch 7201111 silver badges3030 bronze badges 2

• Is the closing of the a tag after that div? – Mike Brant Commented Aug 14, 2012 at 16:56
• Yes, The closing of the a tag is after the div- – codesw1tch Commented Aug 14, 2012 at 16:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

try this :

function showDiv(elem) {
    elem.getElementsByTagName("div")[0].style.visibility="visible";
}

function hideDiv(elem) {
    elem.getElementsByTagName("div")[0].style.visibility = "hidden"
}

since getElementsByClassName("inner-block2") will return NodeList