onmouseover功能不起作用

我在網上找到的所有例子都不適用於我。我想要的只是當鼠標在上面時改變文字的顏色。而當移動鼠標以獲得舊顏色（也許改變大小，但如果這太複雜了還沒有），我知道如何做到這一點在CSS中，但我正在學習JS，這就是我喜歡它的方式。它只是一個文字，所以它是類而不是ID。onmouseover功能不起作用

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>

來源

2017-04-20 nnikolic1986

'getElementsByClassName'返回一個集合。 – SLaks

[NodeList上的addEventListener]的可能重複（http://stackoverflow.com/questions/12362256/addeventlistener-on-nodelist） – Andreas

[類上的JavaScript單擊事件偵聽器]的可能重複（http://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class） –

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

來源

2017-04-20 18:32:18

正確的代碼實現恕我直言

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>

來源

2017-04-20 18:43:57

非常感謝。太好了。我自己嘗試了很多東西，但他們從未工作過。現在，我對如何設置一些東西更加清楚。 – nnikolic1986

onmouseover功能不起作用

回答

相關問題