Question

所以我有这个我正在研究的JavaScript，我想在鼠标悬停时显示/隐藏另一个HTML元素，但它不会工作。这是HTML：

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

Answer 1

试试这个：

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

Answer 2

我只是想了一下，找到了一个简单的解决方案。谢谢你们所有人的贡献。这就是我想出来的。我可以为我要显示/隐藏的每个元素设置一个唯一的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';"

Answer 3

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

Answer 4

getElementsByClassName会返回NodeList，而非Node。 NodeList没有样式属性。您可以只使用列表中的第一个元素，也可以选择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 ......

JavaScript在鼠标悬停时隐藏了另一个元素

4 个答案: