设置悬停项目的背景

Question

我的网站上有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有一个红色的背景，即使我不悬停在任何东西。我需要改变什么?

Answer 1

使用.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>

如果你有任何问题，请在下面留言，我会尽快回复你。

我希望这对你有帮助。编码快乐!

Answer 2

阅读闭包

var spans = document.getElementsByClassName("del");
var i;
for (i = 0; i < spans.length; i = i + 1) {
    (function(span) {
        function func(elem) {
            'use strict';
            elem.style.backgroundColor = "red";
        }
        span.onmouseover = func(span);
    })(spans[i]);
}

Answer 3

如果您希望X在光标离开时返回白色，您还需要为每个元素添加第二个mouseout事件侦听器。

function func() {
   this.style.backgroundColor = "red";
}
function funcOut() {
   this.style.backgroundColor = "white";
}
function events(){
var spans = document.getElementsByClassName("del");
var i;
for (i = 0; i < spans.length; i = i + 1) {
	spans[i].addEventListener('mouseover',func,false);
    spans[i].addEventListener('mouseout',funcOut,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>

Answer 4

我测试了你的代码，虽然我不能完全理解它，我发现一些可能是有帮助的。首先,

spans[0].onmouseover = func(spans[0]);

如果像这样编写代码，代码将立即运行，而不是在您将鼠标放在上面时运行。如果你想这样做，你可以这样写代码:

spans[0].onmouseover=function(){
     func(spans[0]);
}

但是，如果在循环中对其进行编码，则可能导致另一个错误，例如

var spans = document.getElementsByClassName("del");
for (var i = 0; i < spans.length; i++) {
    spans[i].onmouseover=function(){
        console.log(i);         
    }
};

如果你运行这个例子，你会发现它不会输出像"1,2,3.."'，但总是输出'6'。关键字是js中的作用域链，如果你想完全理解它，你必须得到关键字。

最后给出了一个解决问题的方法，该方法使用匿名函数。

function func(elem) {
    'use strict';
    elem.style.backgroundColor = "red";
}
var spans = document.getElementsByClassName("del");
for (var i = 0; i < spans.length; i++) {
    spans[i].onmouseover=function(num){
        return function(){
            func(spans[num]);
        };
    }(i);
};