Javascript 悬停时显示选项卡式内容

我试图创建一个模块，当用户将鼠标悬停在

.header

上时，右侧的图像将发生变化。类似于上的“浏览收藏”模块

在我目前的方法中，我遇到了以下问题：

当悬停在非活动的

.header

（即下面演示中的“header 2”）上时，我希望红色圆圈取代黄色圆圈

当鼠标悬停在“标题2”上时，“标题1”也仍然处于活动状态（

.active

显示样式）

当前方法：

$（文档）.ready（函数（）{
$（'.tabs\uu li.header'）。单击（函数（）{
var tab_id=$（this.attr（'data-tab'）；
$（'.tab__item'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（“#”+tab_id）.addClass（'active'）；
})
//添加类。在li悬停时处于活动状态
$（'.tabs__li'）.mouseenter（函数（）{
$（'.tab__item'）.addClass（'active'）；
});
})

ul.tabs{
保证金：0；
填充：0；
}
span.header{
颜色：#阿巴巴；
光标：指针；
字体大小：30px；
字体大小：粗体；
}
.tab\u项目.活动.标题{
颜色：#454544；
}
页眉：悬停{
颜色：#454544；
}
.tabbed__左，
.tabbed____右{
弹性基准：50%；
}
.tabbed____右{
显示：无；
最小高度：325px；
背景重复：无重复；
背景尺寸：包含；
}
.激活。右键单击{
显示：块；
}

标题1
标题2

在方法中，您没有引用当前的悬停项，而是将

活动类应用于每个元素

您可以删除所有元素的活动类，然后参照
this
（触发事件处理程序的元素）将其应用于元素：


$（文档）.ready（函数（）{
$（'.tabs\uu li.header'）。单击（函数（）{
var tab_id=$（this.attr（'data-tab'）；
$（'.tab__item'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（“#”+tab_id）.addClass（'active'）；
})
//添加类。在li悬停时处于活动状态
$（'.tabs__li'）.mouseenter（函数（）{
$（'.tab__item'）.removeClass（'active'）；
$（this）.parents（'.tab__item'）.addClass（'active'）；
//或者
//$（this）.closest（'.tab__item'）.addClass（'active'）；
});
})
ul.tabs{
保证金：0；
填充：0；
}
span.header{
颜色：#阿巴巴；
光标：指针；
字体大小：30px；
字体大小：粗体；
}
.tab\u项目.活动.标题{
颜色：#454544；
}
页眉：悬停{
颜色：#454544；
}
.tabbed__左，
.tabbed____右{
弹性基准：50%；
}
.tabbed____右{
显示：无；
最小高度：325px；
背景重复：无重复；
背景尺寸：包含；
}
.激活。右键单击{
显示：块；
}


标题1
标题2

您可以使用
父类
jquery选择器找到单击选项卡并应用
活动类


$（文档）.ready（函数（）{
$（'.tabs\uu li.header'）。单击（函数（）{
$（'.tab__item'）.removeClass（'active'）；
$（this）.parents（'.tab__item'）.addClass（'active'）；
})
//添加类。在li悬停时处于活动状态
$（'.tabs__li'）.mouseenter（函数（）{
$（'.tab__item'）.removeClass（'active'）；
$（this）.parent（'.tab__item'）.addClass（'active'）；
});
})
ul.tabs{
保证金：0；
填充：0；
}
span.header{
颜色：#阿巴巴；
光标：指针；
字体大小：30px；
字体大小：粗体；
}
.tab\u项目.活动.标题{
颜色：#454544；
}
页眉：悬停{
颜色：#454544；
}
.tabbed__左，
.tabbed____右{
弹性基准：50%；
}
.tabbed____右{
显示：无；
最小高度：325px；
背景重复：无重复；
背景尺寸：包含；
}
.激活。右键单击{
显示：块；
}


标题1
标题2

Legend，已经开始工作了，谢谢您的解释。