1

所以我有这个我正在处理的 JavaScript,我想在鼠标悬停时显示/隐藏另一个 HTML 元素,但它不起作用。这是HTML:

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

4 回答 4

2

试试这个:

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

它不起作用,因为 getElementsByClassName() 检索包含another类的元素数组。您只需选择您想要的元素。

如果元素只有一个,你可以给它一个特定的 id,像这样:

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

<div class='post' onmouseover="document.getElementById('another_element').style.display='inline';" onmouseout="document.getElementById('another_element').style.display='none';">
于 2011-02-15T23:38:09.520 回答
1

我只是有一个想法,并找到了一个简单的解决方案。感谢你们所有人的贡献。这就是我想出的。我可以为要显示/隐藏的每个元素设置一个唯一的 id,并为每个元素使用 getElementById,而不是使用 getElementsByClassName 并且必须遍历数组。所以它最终是这样的:

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';"
于 2011-02-25T06:53:54.630 回答
0

getElementsByClassName 返回一个数组。尝试迭代它们。

于 2011-02-15T23:38:09.070 回答
0

getElementsByClassName返回 a NodeList,而不是 a Node。ANodeList没有样式属性。您可以仅使用列表中的第一个元素,也可以按 ID 选择:

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

显然,在第二个示例中,您需要给元素一个 ID ...

于 2011-02-15T23:39:12.360 回答