[英]Flipping a div by class name
我试图在鼠标悬停时翻转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中的鼠标悬停,有什么建议吗?
首先,事件的名称是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";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.