onmouseover功能没有用

时间:2017-04-20 18:30:03

标签: javascript

我在网上找到的所有例子都不适合我。 我想要的是当鼠标在它上面时改变文本的颜色。并且当移动鼠标以获得旧颜色(并且可能改变尺寸,但是如果那还不复杂)我知道如何在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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

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);
});

答案 1 :(得分:0)

正确的代码实现恕我直言

&#13;
&#13;
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";    
}
&#13;
<div class="akcija" style="width:200px; height:100px;background-color: yellow">Akcija</div>
&#13;
&#13;
&#13;