jQuery实现相同类名关联元素双向悬停高亮问题求解

解决方案 #

你原有代码存在两个核心问题：

1. 类名选择器需要加.前缀，你直接取到item-1这类class值就传入jQuery，会被识别为标签选择器，无法匹配到对应元素
2. jQuery的hover()方法如果只传一个回调函数，会在鼠标进入和离开时都触发该函数，虽然toggleClass理论上可以切换状态，但快速滑动鼠标等场景容易出现状态错位，建议分开写进入和离开逻辑。

修正后可直接运行的代码

jQuery('.app-hover-select > a').hover(
  // 鼠标进入触发
  function() {
    // 拼接正确的类选择器
    const targetClass = '.' + jQuery(this).attr('class');
    jQuery(targetClass).addClass('active');
  },
  // 鼠标离开触发
  function() {
    const targetClass = '.' + jQuery(this).attr('class');
    jQuery(targetClass).removeClass('active');
  }
);

配套的高亮样式可以自行调整，示例：

.active {
  color: #f43f5e;
  background: #fff1f2;
  outline: 2px solid #f43f5e;
}

优化建议（可选）

如果后续你可能给<a>标签添加其他类，建议改用data-*自定义属性存储关联标识，避免类名干扰：

• HTML修改示例：

<a class="自定义类1 自定义类2" data-item-id="item-1" href="">Apples</a>

• 对应JS修改为：

jQuery('.app-hover-select > a').hover(
  function() {
    const targetId = jQuery(this).data('item-id');
    jQuery(`[data-item-id="${targetId}"]`).addClass('active');
  },
  function() {
    const targetId = jQuery(this).data('item-id');
    jQuery(`[data-item-id="${targetId}"]`).removeClass('active');
  }
);

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