Javascript 悬停或单击以显示相应的图像

我有一个列表，当用户悬停或点击列表时，相应的图像将显示在右侧

下面是我用于从li标记中添加和删除活动类的脚本

$（.listWrap ul li”）。悬停(
函数（）{
$（this.addClass（'active'）；
},
函数（）{
if（！$（this）.hasClass（'clicked'））{
$（this.removeClass（'active'）；
}
}
);
$（“.listWrap ul li”）。单击（函数（）{
$（this.toggleClass（'clicked'）；
});
.listWrap li.active a{
颜色：#f00；
}
李维明先生{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}

















您可能可以使用索引通过
hide（）
/
show（）
隐藏显示图像：


$（'.listWrap-ul-li:eq（0）'）.addClass（'active'）；//将页面加载时的类添加到第一个linnk
$（'.hoverimg ul li:eq（0）'）.show（）；//在页面加载时显示第一个图像
$（“.listWrap ul li”）。悬停(
函数（）{
$（'.listWrap ul li'）.removeClass（'active'）；//删除类中的所有链接li元素
$（'.hoverimg ul li'）.hide（）；//隐藏所有图像li元素
$（this.addClass（'active'）；//将类添加到当前元素
var idx=$（this）.index（）-1；
$（'.hoverimg ul li:eq（'+idx+'））.show（）；//显示相应的图像li元素
}
);
.listWrap li.active a{
颜色：#f00；
}
李维明先生{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}

















我有相同数量的元素。我忘记更新了。让我更新itI在问题中添加的最后一个图像。我试过你的答案。1） 它正在从li中删除活动类2）它正在显示最后一个li图像。更新后我再次检查了你的答案，谢谢你的答案，但我遇到了一些问题，你能帮我吗？1） 如果我一个接一个地悬停，那么最后我就看不到图像了。2） 加载上次显示的图像。我得先展示一下one@user9437856“那你在鼠标左键上想要什么呢？”曼恩，是的，它对我很有效。谢谢你的帮助。我想知道你从哪里学的脚本？有视频或课程吗？