多同类名span悬停高亮异常：无法移除over类求解决

看起来你遇到的问题核心在于类名的获取逻辑，导致toggleClass无法正确定位到目标元素，进而无法移除over类。我来帮你拆解一下：

可能的问题根源 #

如果你的span元素除了innerX之外还有其他类名（比如<span class="inner1 text-small">），直接使用$(this).attr('class')会获取到所有类名的拼接字符串（比如"inner1 text-small"）。这时候$('.' + className)会变成一个无效的选择器（.inner1 text-small会被解析为选择class为text-small的元素，而非``inner1`），自然无法正确移除类。

另外，用toggleClass在mouseout事件中其实不太稳妥——因为mouseover已经主动添加了over类，mouseout时直接removeClass更直接，避免状态混乱。

修复后的代码示例 #

首先，我们需要从元素的类列表中精准提取出以inner开头的类名，然后再进行类的添加/移除操作：

// 给所有包含inner前缀类名的span绑定事件
$('span[class^="inner"], span[class*=" inner"]').on({
  mouseover: function() {
    // 筛选出以inner开头的类名
    const targetClass = $(this).attr('class').split(' ')
      .find(cls => cls.startsWith('inner'));
    // 给所有同类别元素添加高亮类
    $('.' + targetClass).addClass('over');
  },
  mouseout: function() {
    const targetClass = $(this).attr('class').split(' ')
      .find(cls => cls.startsWith('inner'));
    // 移除所有同类别元素的高亮类
    $('.' + targetClass).removeClass('over');
  }
});

对应的高亮CSS保持即可：

.over {
  background-color: yellow;
}

额外优化点 #

• 使用span[class^="inner"], span[class*=" inner"]作为选择器，能覆盖类名在开头或中间的情况（比如<span class="box inner2">）。
• 用find替代filter+[0]，更简洁地获取目标类名。
• 合并事件绑定，让代码结构更整洁。

这样修改后，鼠标悬停时同类别元素会正确高亮，鼠标移出后over类也会被正常移除啦。

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