按類名翻轉div

Question

我試圖在鼠標懸停時翻轉div，我發現一些頁面確實有用。

按照此步驟設置ID，然后根據這一步驟，我需要在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";
}