HTML/CSS：盘子的图像预览显示在同一位置，否则图像隐藏

假设我有一个项目列表

Item 1                 *****
Item 2                 *   *
Item 3                 *****

当我将鼠标悬停在这些相应的项目上时，我希望看到它们的所有图像都显示在相同的位置（在本例中为星形框），否则它将有一个默认的图像框

我怎样才能做到？我知道如何使图像显示在悬停上，但不知道如何具体定位它们

---

谢谢

非常不具体的问题，这里有3个链接，都需要Javascript，一个简单，一个有点难，最后一个对我来说真的很头疼

#main{border:grey 3px solid;
box-shadow:#000 5px 6px 3px;margin:0 auto;display:block;}
.imgStyle{height:100px;width:100px;border:2px solid silver;
box-shadow: 4px 5px 2px #000;margin-right:10px;}
#container{width:500px;margin:20px auto;}

链接从简单到困难

---

您可以使用JavaScript为您实现以下目标：

$（'#list'）。每个（函数（）{
$（this）.find（'li'）.each（function（）{
$（this）.hover（函数（）{
var itemText=$（this.text（）；
$（'#imageBox img'）.attr（'src'，'https://placehold.it/"文本",；
});
});
});
#列表，#图像框{
宽度：45%；
显示：内联块；
垂直对齐：中间对齐；
最小高度：200px；
保证金：0；
}
#名单{
背景色：#cdcdcd；
}
#图像盒{
背景色：#cdcdff；
}
#图像盒{
宽度：350px；
高度：150像素；
保证金：25像素自动；
}


350x200
300x250
250x300