我的网站上有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>


如有任何疑问,请在下面发表评论,我们会尽快与您联系。

我希望这有帮助。编码愉快!

10-06 03:33
查看更多