JavaScript实现一个onmouserover实现鼠标移入和移除功能-CSDN博客

本文链接：https://blog.csdn.net/qq_39494664/article/details/87438897

本文介绍了一种使用onmouseover事件同时实现鼠标移入和移出效果的方法，通过一个全局变量和for循环，使元素在鼠标移入时高亮显示，并在移出时恢复原状，适用于各种“此有彼无”的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

onmouser

onmouserover的功能鼠标移入时执行相应函数
在鼠标移出时不起作用

那么我们如何用一个onmouserover既实现onmouserover的功能又实现onmouserout的功能？
示例代码如下

var num = 0;
for(var i = 0;i < obj.length; i++) {
	obj[i].index = num;
	obj[num].onmouseover = function() {
    	obj[num].style.backgroundColor = "#000";
    }
    obj[num].onmouseout = function() {
    	obj[num].style.backgroundColor = "#fff";
    }
}

我们可以看到，上述代码实现了obj这个元素鼠标经过时背景色变黑离开时变白
下面是一个onmouserover实现的上面功能

var num = 0;
for(var i = 0;i < obj.length; i++) {
	obj[i].index = i;
	obj[i].onmouseover = function() {
		for (var k = 0; k < obj.length;k++){
			obj[k].style.backgroundColor = "#fff";
			num = this.index;
		}
		obj[num].style.backgroundColor = "#000";
	}
}