Javascript 将鼠标悬停在特定文本上并以CSS显示图像

我正在尝试为我的网页设计一个菜单。为了创建一个响应菜单，我需要一些属性来实现基本逻辑的交互。例如，左侧有四个文本[可悬停]，当悬停在这些文本上时，页面右侧将显示一个图像。[这是显示图像的固定位置]每个单独的文本显示不同的图像。当鼠标悬停在冰激凌文本上时，它会显示一个冰激凌图像，而鼠标悬停在比萨饼文本上时，它会向用户显示一个比萨饼图像。（解决方案仅需要使用HTML和CSS）

---

您只需通过某个id或其他属性在项目与其图像之间创建连接

$（文档）.ready（函数（）{
$（'.menu li'）。悬停（函数（）{
var setRelation=$（this）.data（'relation'）；
变量a=$（'.content'）.find（'#'+setRelation）；
$（'.image'）.hide（）；
a、 show（）；
});
});
节{display:flex；}
保险商实验室{
宽度：30%；
}
.内容{
宽度：70%；
}
img{
最大宽度：100%；
}
.形象{
显示：无；
}


第1项
第2项
第3项
第4项

把你的IMG放在这里
把你的IMG放在这里
把你的IMG放在这里
把你的IMG放在这里
欢迎使用堆栈溢出！请访问，采取的，看看什么和。做一些研究，搜索相关话题等；如果遇到问题，请发布您的尝试，并使用
[]
代码段编辑器记录输入和预期输出。