[英]Javascript: mouseover function not working for div
以下是我编写的代码:
window.onload = function() { var test = document.getElementsByClassName("experiment"); for (var i = 0; i < test.length; i++) { test[i].addEventListener("mouseover", function(event) { console.log('its working'); event.target.style.color = "orange"; }, false); } };
body { background-color: #aaa; } .parent-experiment { width: 500px; height: 500px; background-color: yellow; display: flex; justify-content: space-around; perspective: 500px; } .experiment { width: 250px; height: 250px; margin-top: 100px; background-color: blue; transform: rotateY(45deg); }
<div class="parent-experiment"> <div class="experiment"></div> </div>
我想要的功能是,当我将鼠标悬停在内部div元素上时,其颜色应更改为橙色。 但这根本不起作用,而且我只想使用javascript来完成整个功能。
纠正我如果我错了,但我认为您正在尝试更改背景颜色属性而不是颜色属性..例如示例...
另一方面,您可以仅使用带有:hover选择器的css来实现。
window.onload=function(){ var test=document.getElementsByClassName("experiment"); for(var i=0;i<test.length;i++){ test[i].addEventListener("mouseover",function(event){ console.log('its working'); event.target.style.backgroundColor="orange"; },false); test[i].addEventListener("mouseout",function(event){ console.log('its working'); event.target.style.backgroundColor="blue"; },false); } };
body{ background-color: #aaa; } .parent-experiment{ width: 500px; height: 500px; background-color: yellow; display: flex; justify-content: space-around; perspective: 500px; } .experiment{ width: 250px; height: 250px; margin-top: 100px; background-color: blue; transform: rotateY(45deg); }
<div class="parent-experiment"> <div class="experiment"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.