显示/隐藏div onmouseover / onmouseout Javascript

时间:2012-08-14 16:53:46

标签: javascript html5 css3 onmouseover onmouseout

我的页面上有一个超链接。我想在鼠标悬停在超链接上时显示div,并在我鼠标移动时隐藏它。

我的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";
}

和CSS:

.inner-block {
    visibility: hidden
}

我尝试过getElementsByTagName,getElementsByClassName,无论我尝试什么

Uncaught TypeError: Cannot set property 'visibility' of undefined

1 个答案:

答案 0 :(得分:3)

试试这个:

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

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

因为getElementsByClassName(“inner-block2”)将返回NodeList