Javascript 悬停CSS时，两个图像会改变位置

我在寻找我问题的答案。我的页面顶部有一个大图片，底部有八个小图片。我想让它成为这样，当你悬停小图像（它也是一个链接，去不同的地方）的大图像更改为这个小图像。如此清楚地解释，两个图像改变/交换位置。当我打开它时，大图像又变回来了

这是照片，你知道我在说什么！ 我正在寻找CSS、React（如果有任何有用的组件）或JavaScript解决方案（if-else语句或类似的东西）

---

谢谢你抽出时间

您可以对您的案例使用jQuery，捕获悬停事件并更新主图像源

$（文档）.ready（函数（）{
$（'.thumbnail'）。悬停（函数（e）{
src=$（e.target）.data（'main'）；
$（“#target_img”）.attr（'src'，src）；
});
});






使用
mouseover
和
mouseout
事件侦听器更改大div的背景图像

下面的代码片段解释了这一切-


功能更改（e）{
document.getElementById（“main”）.style.backgroundImage=`url（${e.target.src}）`；
}
设imgs=document.getElementsByTagName（“img”）；
for（设i=0；i
我创建了一个您指定的交换效果示例，并使用颜色创建了它的代码笔：


JS:

您可以在Javascript中捕获mouseover，只需交换背景图像并交换回mouseout即可


const picEls=document.getElementsByClassName（'small'）；
const largeEl=document.getElementsByClassName（'large'）[0]；
对于（让我=0；我的问题是其他一些帖子的重复，包括：看看这是否解决了你的问题我编辑了我的帖子，以便你更好地理解我的意思！再次感谢！！
<section class="main" id="main" style="background-color: #000"></section>
<div>
  <Section style="background-color: orange" onmouseover="grabAndSwap(event)"></section>
  <Section style="background-color: cyan" onmouseover="grabAndSwap(event)"></section>
  <Section style="background-color: maroon" onmouseover="grabAndSwap(event)"></section>
  <Section style="background-color: #444" onmouseover="grabAndSwap(event)"></section>
</div>
<div>
  <Section style="background-color: #ff0000" onmouseover="grabAndSwap(event)"></section>
  <Section style="background-color: #00ff00" onmouseover="grabAndSwap(event)"></section>
  <Section style="background-color: #0000ff" onmouseover="grabAndSwap(event)"></section>
  <Section style="background-color: magenta" onmouseover="grabAndSwap(event)"></section>
</div>

.main {
  height: 30vh;
  width: 100%;
}
section {
  height: 15vh;
  width: 25%;
  float: left;
}
div {
  height: 15vh;
  width: 100%;
}

const main = document.getElementById('main');
function grabAndSwap(event) {
  var toSwapWith = event.target;
  var mainColor = main.style.backgroundColor;
    console.log(mainColor);
  var otherColor = toSwapWith.style.backgroundColor;
    console.log(otherColor);
  
 main.style.backgroundColor = otherColor;
 toSwapWith.style.backgroundColor = mainColor;
}