按类名翻转div

Question

我试图在mouseover上翻转div，我发现几页真的很有用。

followed this设置ID，然后根据this one我需要在HTML中添加mouseover属性，但它不像ID那样容易。

这里是我到目前为止的代码：

var abcElements = document.querySelectorAll('.builder_row_cover'); 

for (var i = 0; i < abcElements.length; i++) 
    abcElements[i].id = 'abc-'; 
var oHover = document.getElementById("abc-"); 
oHover.setAttribute("onmousehover", "flip()"); 


var k = 0; 

function flip() { 
var j = document.getElementById("abc-"); 
k += 180; 
j.style.transform = "rotatey(" + k + "deg)"; 
j.style.transitionDuration = "0.5s" 
} 

我刚开始，我试图与设置属性，但没有办法看到的HTML鼠标悬停，任何建议？

Answer 1

首先，活动的名称是onmouseover。

赋予多个元素相同的ID将不起作用。 document.getElementById()将只返回具有该ID的第一个元素，而不是鼠标结束的元素。

根本不需要使用该ID。您可以在事件处理程序中使用this来引用事件的目标。

var abcElements = document.querySelectorAll('.builder_row_cover'); 

for (var i = 0; i < abcElements.length; i++) { 
    abcElements[i].addEventListener('mouseover', flip); 
} 

var k = 0; 

function flip() 
    k += 180; 
    this.style.transform = "rotatey(" + k + "deg)"; 
    this.style.transitionDuration = "0.5s"; 
}