父元素触发hover事件时如何通过JavaScript修改子元素h4样式

实现方案 #

你可以按照以下逻辑编写JS代码实现需求，核心是先获取所有组件节点转成数组，再遍历给每个组件绑定悬浮事件：

完整JS代码 #

// 1. 获取页面上所有.s-item组件，转换为数组
const itemArr = Array.from(document.querySelectorAll('.s-item'));

// 2. 遍历数组中的每个组件，绑定事件
itemArr.forEach(item => {
  // 找到当前组件对应的h4元素
  const curH4 = item.querySelector('h4');
  // 鼠标移入时修改颜色
  item.addEventListener('mouseenter', () => {
    // 可自行修改为你想要的色值，此处和你现有阴影色保持一致
    curH4.style.color = '#00bfb2';
  });
  // 鼠标移出时恢复默认颜色
  item.addEventListener('mouseleave', () => {
    curH4.style.color = '';
  });
});

使用注意 #

• 把上述代码放在HTML文件的</body>闭合标签之前即可，要保证代码执行时页面元素已经加载完成

可选简化方案 #

如果没有强制要求用JS实现，仅新增一行CSS也能达到同样效果：

.s-item:hover h4 {
  color: #00bfb2;
}

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