本文介绍使用 jquery 实现“鼠标悬停右侧图片链接时，自动高亮左侧对应 data-id 标题”的交互效果，支持任意数量的动态配对，无需硬编码 id，具备良好的可扩展性。
本文介绍使用 jquery 实现“鼠标悬停右侧图片链接时，自动高亮左侧对应 data-id 标题”的交互效果，支持任意数量的动态配对，无需硬编码 id，具备良好的可扩展性。
在实际开发中，常需实现跨区域的联动高亮效果——例如右侧图库中的某张缩略图被悬停时，左侧导航栏中具有相同 data-id 的标题同步变色。上述 HTML 结构清晰分离了内容容器（.left_box）与操作触发区（.right_box），但原生 CSS 无法跨越父级关联不同区域的元素，因此必须借助 JavaScript 或 jQuery 实现动态响应。
以下是推荐的 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');
$('.left_box div[data-id="' + targetId + '"]').addClass('highlight');
},
// 鼠标离开：移除高亮类（推荐用 class 控制样式，而非内联 style）
function() {
const targetId = $(this).data('id');
$('.left_box div[data-id="' + targetId + '"]').removeClass('highlight');
}
);
});
同时，在 CSS 中定义 .highlight 类，实现样式解耦与复用：
.left_box div {
transition: color 0.2s ease; /* 添加平滑过渡 */
}
.highlight {
color: #e74c3c;
font-weight: bold;
}
✅ 关键优势说明：
- ✅ 动态适配：不依赖固定 ID（如
"2"），而是通过$(this).data('id')实时读取，天然支持任意数量、任意顺序的配对项； - ✅ 语义清晰：使用 CSS 类（
highlight）而非直接操作css()，便于主题定制、动画控制及维护； - ✅ 性能友好：仅在 hover 时精准查找目标元素，避免全局遍历；
- ✅ 健壮容错：若某
data-id在左侧不存在，removeClass/addClass不会报错，静默忽略。
⚠️ 注意事项：
- 确保 jQuery 已正确引入（建议 v3.6+）；
-
data-id值应为合法字符串或数字（jQuery.data()会自动类型转换，但作为选择器时建议统一用字符串拼接）； - 若需支持移动端“点击高亮”，可补充
click事件并配合toggleClass实现 toggle 行为； - 如项目已使用 Vue/React 等框架，推荐改用响应式数据绑定替代 DOM 操作，以保持架构一致性。
该方案兼顾可读性、可维护性与扩展性，是处理跨容器 data 属性联动的经典实践。
