求助：鼠标悬停img时为同data-id的标题修改颜色（JS/jQuery）

问题需求 #

当鼠标悬停在.right_box下带有data-id属性的<a>标签（内部包含图片）时，修改.left_box下拥有相同data-id的<div>标签的文字颜色。例如悬停a[data-id="2"]时，改变.left_box中div[data-id="2"]的颜色，需用JavaScript或jQuery实现。

参考HTML结构 #

<div class="left_box">
  <div data-id="1">
      title 1
   </div>
   <div data-id="2">
      title 2
   </div>
   <div data-id="3">
      title 3
   </div>
</div>
<div class="right_box">
    <a href="#" data-id="1">
       <img src="url_image">
    </a>
    <a href="#" data-id="3">
       <img src="url_image">
    </a>
    <a href="#" data-id="2">
       <img src="url_image">
    </a>
</div>

解决方案 #

方案一：jQuery 实现 #

利用jQuery的hover()方法监听悬停状态，通过data()获取元素的data-id，再定位左侧对应元素修改样式。推荐用类名控制样式，便于维护：

1. 先定义高亮样式：

.highlight-title {
  color: #ff4400; /* 可根据需求替换颜色 */
}

2. jQuery 代码：

// 监听右侧a标签的悬停事件
$('.right_box a').hover(
  // 鼠标进入时添加高亮类
  function() {
    const targetId = $(this).data('id');
    $(`.left_box div[data-id="${targetId}"]`).addClass('highlight-title');
  },
  // 鼠标离开时移除高亮类
  function() {
    const targetId = $(this).data('id');
    $(`.left_box div[data-id="${targetId}"]`).removeClass('highlight-title');
  }
);

方案二：原生 JavaScript 实现 #

无需依赖jQuery，直接通过原生事件监听和DOM操作实现，同样推荐类名控制样式：

1. 同样先定义高亮样式（同上）：

.highlight-title {
  color: #ff4400; /* 可根据需求替换颜色 */
}

2. 原生JS代码：

// 获取右侧所有带data-id的a标签
const rightLinks = document.querySelectorAll('.right_box a[data-id]');

// 为每个链接绑定悬停事件
rightLinks.forEach(link => {
  // 鼠标进入事件
  link.addEventListener('mouseenter', () => {
    const targetId = link.dataset.id;
    const targetTitle = document.querySelector(`.left_box div[data-id="${targetId}"]`);
    if (targetTitle) {
      targetTitle.classList.add('highlight-title');
    }
  });

  // 鼠标离开事件
  link.addEventListener('mouseleave', () => {
    const targetId = link.dataset.id;
    const targetTitle = document.querySelector(`.left_box div[data-id="${targetId}"]`);
    if (targetTitle) {
      targetTitle.classList.remove('highlight-title');
    }
  });
});

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