按类名翻转div

时间:2016-04-25 22:00:34

标签: javascript jquery html animation

我试图在鼠标悬停时翻转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中看到鼠标悬停,有什么建议吗?

1 个答案:

答案 0 :(得分:0)

首先,事件的名称为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";
}