本文讲解如何使用 jquery 实现：当鼠标悬停在右侧带 data-id 的图片链接上时，自动为左侧对应 data-id 的标题文字动态应用相同颜色（或自定义样式），实现跨区域 dom 元素联动高亮。
本文讲解如何使用 jquery 实现：当鼠标悬停在右侧带 data-id 的图片链接上时，自动为左侧对应 data-id 的标题文字动态应用相同颜色（或自定义样式），实现跨区域 dom 元素联动高亮。
要实现「hover 图片链接时，高亮同 data-id 的标题」这一交互效果，核心在于建立 a[data-id] 与 .left_box div[data-id] 之间的动态映射关系。直接为每个 ID 写死选择器（如 data-id="2"）虽可行，但缺乏可扩展性。更专业、可维护的方案是利用事件委托 + 动态属性读取，避免重复代码。
✅ 推荐实现方式（jQuery）
$(document).ready(function() {
// 为所有 .right_box 下的 a[data-id] 绑定 hover 事件
$('.right_box a[data-id]').hover(
// 鼠标进入：获取当前 a 的 data-id，找到左侧对应 div，并添加高亮类
function() {
const targetId = $(this).data('id');
const $targetTitle = $('.left_box div[data-id="' + targetId + '"]');
$targetTitle.addClass('highlight');
},
// 鼠标离开：移除高亮类
function() {
const targetId = $(this).data('id');
const $targetTitle = $('.left_box div[data-id="' + targetId + '"]');
$targetTitle.removeClass('highlight');
}
);
});
? 配套 CSS 样式（示例）
.highlight {
color: #e74c3c;
font-weight: bold;
transition: color 0.2s ease;
}
? 关键说明：
- 使用
.data('id')比直接读取attr('data-id')更可靠（自动类型转换，兼容数字/字符串）；- 推荐用
addClass/removeClass而非直接操作css()，便于统一控制样式、支持 CSS 过渡动画、且符合关注点分离原则；- 若需“仅高亮、不干扰原有颜色”，可在 CSS 中使用
!important或确保.highlight选择器权重足够（如.left_box div[data-id].highlight）；- 如需兼容原生 JavaScript（无 jQuery），可使用
addEventListener('mouseenter')+querySelector实现等效逻辑。
⚠️ 注意事项
- 确保 DOM 已加载完成再执行脚本（即包裹在
$(document).ready()或DOMContentLoaded中）； -
data-id值应保持唯一且合法（避免空格、特殊字符；若含前导零，建议统一转为字符串处理）； - 若
.left_box div内容为纯文本，注意其默认display: block，无需额外设置；若含内联元素，可加cursor: default提升体验。
该方案简洁、健壮、易于复用——只需一次绑定，即可支持任意数量的 data-id 映射，是构建响应式内容联动界面的典型实践。
