onmouseover功能不起作用

Question

我在网上找到的所有例子都不适用于我。 我想要的是当鼠标在它上面时改变文本的颜色。 并且当移动鼠标以获得旧颜色（并且可能改变尺寸，但是如果那还不复杂）我知道如何在CSS中这样做但我正在学习JS，这就是我想要的方式。 文本中只有一个单词，因此它是Class而不是ID。

 document.getElementsByClassName("akcija").addEventListener("mouseover", mouseOver); document.getElementsByClassName("akcija").addEventListener("mouseout", mouseOut); function mouseOver() { document.getElementsByClassName('akcija').style.color = "black"; } function mouseOut() { document.getElementsByClassName('akcija').style.color = "Blue"; } 

 <div class="akcija" style="width:200px; height:200px"></div> 

Answer 1

document.getElementsByClassName方法返回一个nodeList ，因此，您可以使用其索引 （从零开始）访问DOM元素。

尝试这个：

document.getElementsByClassName('akcija')[0].style.color = "black";

如果您使用的是ES6 ，则可以使用Array.from方法执行此操作。

Array.from(document.getElementsByClassName('akcija')).forEach(function(element) {
  element.addEventListener('mouseover', mouseOver);
});

Answer 2

正确的代码实现恕我直言

 var akcjijas = document.getElementsByClassName("akcija"); for (var i in akcjijas) { if (akcjijas.hasOwnProperty(i)){ akcjijas[i].addEventListener("mouseover", mouseOver); akcjijas[i].addEventListener("mouseout", mouseOut); } } function mouseOver() { this.style.color = "black"; } function mouseOut() { this.style.color = "Blue"; } 

 <div class="akcija" style="width:200px; height:100px;background-color: yellow">Akcija</div>