JS如何判断三个元素的mouseover事件触发以切换外层可折叠区背景

• 完全误用了addEventListener方法：该方法的作用是为DOM元素注册事件监听器，本质是绑定事件触发时要执行的逻辑，没有布尔返回值，永远返回undefined，所以你写的判断条件永远不成立，这是代码不生效的核心原因。
• addEventListener调用参数缺失：该方法最少需要传入2个参数，分别是事件名称和事件触发时执行的回调函数，你只传了事件名称，没有指定事件触发后要执行的操作。
• 未完成DOM元素获取：直接使用row2_4、row2、row4、myCollapsible3作为变量的前提是你已经提前通过DOM选择器获取到了对应的元素节点，否则会直接抛出未定义错误。
• 定义的BGchangeOnHover函数没有被调用，就算内部逻辑正确也不会执行。

首先先提前获取所有需要操作的DOM元素，再为三个触发悬停的元素分别绑定mouseover事件监听器，同时如果需要鼠标移出后恢复背景，可以额外绑定mouseout事件：

// 第一步：先获取所有需要的DOM元素，替换括号内的选择器为你实际的选择器
const row2_4 = document.querySelector('#row2_4')
const row2 = document.querySelector('#row2')
const row4 = document.querySelector('#row4')
const myCollapsible3 = document.querySelector('#myCollapsible3')
// 定义背景修改函数
function setTargetBg() {
  myCollapsible3.style.backgroundImage = "url('/images/untitled2.png')"
}
// 定义背景恢复函数，不需要恢复可以去掉
function resetTargetBg() {
  myCollapsible3.style.backgroundImage = 'none' // 替换为你原来的默认背景即可
}
// 批量为三个元素绑定事件
[row2_4, row2, row4].forEach(el => {
  el.addEventListener('mouseover', setTargetBg)
  el.addEventListener('mouseout', resetTargetBg) // 不需要恢复背景可以删掉这行
})

内容的提问来源于stack exchange，提问作者Abdelmounim SIFELHAK