JS：在悬停项目上设置背景

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

继续阅读 closures

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 到 return 在光标离开时变为白色，您还需要为每个元素添加 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]);

如果你这样编码，代码会立即运行，而不是当你把鼠标放在it.If你想要的时候，你可以这样编码：

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中的Scope Chain，想要完全看懂，必须拿到钥匙

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

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);
};

JS：在悬停项目上设置背景

JS: Set Background on hovered items

html

javascript

css

hover