我的网站上有6个<p>
标记,并且希望X
悬停时具有不同的颜色:
HTML:
<p>A<span class="del">X</span></p>
<p>B<span class="del">X</span></p>
<p>C<span class="del">X</span></p>
<p>D<span class="del">X</span></p>
<p>E<span class="del">X</span></p>
<p>F<span class="del">X</span></p>
JS:
function func(elem) {
'use strict';
elem.style.backgroundColor = "red";
}
var spans = document.getElementsByClassName("del");
var i;
for (i = 0; i < spans.length; i = i + 1) {
spans[i].onmouseover = func(spans[i]);
}
但是对于我的代码,即使我没有将鼠标悬停在任何地方,每个
X
都有红色背景。我必须改变什么? 最佳答案
使用.addEventListener()
我还将您的for循环放入了一个名为events()
的函数中。页面准备好时将调用此方法。
function func() {
this.style.backgroundColor = "red";
}
function events(){
var spans = document.getElementsByClassName("del");
var i;
for (i = 0; i < spans.length; i = i + 1) {
spans[i].addEventListener('mouseover',func,false);
}
}
window.onload=events;
<p>A<span class="del">X</span></p>
<p>B<span class="del">X</span></p>
<p>C<span class="del">X</span></p>
<p>D<span class="del">X</span></p>
<p>E<span class="del">X</span></p>
<p>F<span class="del">X</span></p>
如有任何疑问,请在下面发表评论,我们会尽快与您联系。
我希望这有帮助。编码愉快!