设置悬停项目的背景
JS: Set Background on hovered items
我的网站上有6个<p>
标签,并希望X
有一个不同的颜色,当它悬停:
<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>
如果你有任何问题,请在下面留言,我会尽快回复你。
我希望这对你有帮助。编码快乐!
阅读闭包
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]);
}
如果您希望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>
我测试了你的代码,虽然我不能完全理解它,我发现一些可能是有帮助的。首先,
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);
};
相关文章:
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 正在将数据主题添加到所有项目
- 在BootStrap菜单栏中为所选项目设置背景,类似于BootStrap中的父导航选项
- 使用圆中的数组更改背景颜色项目
- 单击项目以更改另一个项目的背景图像
- 加载所有项目后更新背景
- 如何在项目符号列表中插入背景(图片)元素,其 URL 写入相邻的项目符号列表中
- 在导航中对活动项目背景进行动画处理失败
- Foreach项目悬停在不同的背景上
- 如何更改项目's的背景颜色使用jquery平滑
- HTML选择选项多次更改选中的项目灰色背景时,不在焦点上
- 如何改变所有选定的项目背景/类,而不是只改变一个选定的项目在ng-repeat角
- 当项目被点击改变背景颜色- CSS(没有jQuery)
- 如何使用jQuery设置每个项目的背景颜色到下一个项目
- 如何设置重复器项目背景颜色
- 当弹出框处于活动状态时,如何在离子中与背景中的项目进行交互
- 无法更改 UL 中所选 li 项目的背景颜色
- 如何更改表中项目的背景
- 如何动态地添加一个类到li项目,并使用javascript和css改变它的背景颜色
- 设置悬停项目的背景