提升前端交互效率：JavaScript事件委托实现多元素悬停效果

<div id='columnContainer'>
  <div id='research' class='column-item'>
    <div class='textblock'>
      <h3>研究与分析</h3>
      <p>深入的市场洞察和数据分析。</p>
    </div>
    <div class='myimage koek-achtergrond'>
      <!-- 背景图片占位符 -->
    </div>
    <div class='myimage koek-stripe'>
      <!-- 装饰条纹 -->
    </div>
  </div>

  <div id='development' class='column-item'>
    <div class='textblock'>
      <h3>产品开发</h3>
      <p>创新解决方案和技术实现。</p>
    </div>
    <div class='myimage koek-achtergrond'>
      <!-- 背景图片占位符 -->
    </div>
    <div class='myimage koek-stripe'>
      <!-- 装饰条纹 -->
    </div>
  </div>

  <div id='marketing' class='column-item'>
    <div class='textblock'>
      <h3>市场推广</h3>
      <p>品牌策略和用户增长。</p>
    </div>
    <div class='myimage koek-achtergrond'>
      <!-- 背景图片占位符 -->
    </div>
    <div class='myimage koek-stripe'>
      <!-- 装饰条纹 -->
    </div>
  </div>
</div>

#columnContainer {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: #f0f0f0;
}

.column-item {
  flex: 1;
  min-height: 200px;
  background-color: var(--primary-blue-color, #007bff); /* 默认蓝色 */
  color: white;
  padding: 15px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer; /* 提示可交互 */
  transition: background-color 0.3s ease; /* 平滑过渡 */
}

.column-item .myimage {
  position: absolute;
  opacity: 0.7;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.column-item .koek-achtergrond {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('your-default-background.jpg'); /* 默认背景图 */
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.column-item .koek-stripe {
  bottom: 0;
  right: 0;
  width: 50%;
  height: 30px;
  background-color: #00bcd4; /* 默认条纹蓝色 */
  z-index: 2;
}

/* 悬停时的样式 */
.column-item.hovered {
  background-color: black; /* 悬停时背景变黑 */
}

.koek-stripe-hovered {
  background-color: black; /* 条纹悬停时变黑 */
}

.koek-transform {
  transform: scale(1.1); /* 背景图放大 */
  opacity: 1;
}

// 获取父容器元素
const columnContainer = document.getElementById('columnContainer');

// 定义处理鼠标事件的函数
function handleColumnHover(event) {
  // 使用 event.target.closest() 查找最近的 .column-item 父级
  // 这样无论鼠标悬停在 .column-item 的哪个子元素上，都能正确识别到 .column-item 本身
  const targetColumn = event.target.closest('.column-item');

  // 确保事件确实发生在 .column-item 内部
  if (targetColumn) {
    const stripe = targetColumn.querySelector('.koek-stripe');
    const background = targetColumn.querySelector('.koek-achtergrond');

    if (event.type === 'mouseover') {
      // 鼠标进入事件
      targetColumn.classList.add('hovered'); // 改变列背景色
      if (stripe) {
        stripe.classList.add('koek-stripe-hovered'); // 改变条纹颜色
      }
      if (background) {
        background.classList.add('koek-transform'); // 放大背景图
      }
      console.log('鼠标进入列:', targetColumn.id);
    } else if (event.type === 'mouseout') {
      // 鼠标离开事件
      targetColumn.classList.remove('hovered'); // 恢复列背景色
      if (stripe) {
        stripe.classList.remove('koek-stripe-hovered'); // 恢复条纹颜色
      }
      if (background) {
        background.classList.remove('koek-transform'); // 恢复背景图大小
      }
      console.log('鼠标离开列:', targetColumn.id);
    }
  }
}

// 在父容器上绑定 mouseover 和 mouseout 事件
if (columnContainer) {
  columnContainer.addEventListener('mouseover', handleColumnHover);
  columnContainer.addEventListener('mouseout', handleColumnHover);
} else {
  console.error('父容器 #columnContainer 未找到！');
}