悬停指定class嵌套元素时如何修改body背景色并实现淡入淡出效果

问题原因 #

你替换getElementsByClassName后不生效，是因为该方法返回的是所有匹配类名的元素组成的类数组集合，无法直接给整个集合绑定事件，必须遍历后给每个单独绑定。

优化实现方案（基于你已引入的jQuery，适配多实例场景） #

你不需要每个元素单独写绑定逻辑，用属性配置的方式可以适配任意数量的触发元素：

1. 给所有需要触发body变色的元素（图片、灰色块）做两个配置：
   • 统一加公共类名 hover-trigger
   • 加自定义属性 data-body-class，值为你要给body添加的对应类名，比如需要触发加hover-color1就写data-body-class="hover-color1"
2. 替换原有JS代码为以下内容：

$(document).ready(function(){
  $('.hover-trigger').hover(
    // 鼠标移入触发
    function() {
      const targetClass = $(this).data('body-class')
      $('body').addClass(targetClass)
    },
    // 鼠标移出触发
    function() {
      const targetClass = $(this).data('body-class')
      $('body').removeClass(targetClass)
    }
  )
});

原生JS实现版本（不想用jQuery可以用这个） #

window.addEventListener('load', function() {
  const body = document.body
  const triggerList = document.getElementsByClassName('hover-trigger')
  // 遍历所有触发元素绑定事件
  for (let trigger of triggerList) {
    trigger.addEventListener('mouseover', function() {
      const targetClass = this.dataset.bodyClass
      body.classList.add(targetClass)
    })
    trigger.addEventListener('mouseout', function() {
      const targetClass = this.dataset.bodyClass
      body.classList.remove(targetClass)
    })
  }
})

你要的淡入淡出过渡效果直接给body加transition: background-color 0.3s ease这类CSS规则即可，不需要修改JS逻辑。

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