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

Question

我正在寻找我的问题的答案。我的页面顶部有一个大图像，页面底部有八个小图像。我想这样做，所以当您将小图像悬停时（它也是一个指向不同位置的链接），大图像会变为这个小图像。如此清楚地解释，两个图像更改/交换位置。当我取消悬停时，大图像会变回来。

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

https://i.ibb.co/C5m5sH3/demonstration.png

感谢您的宝贵时间！

Answer 1

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

$(document).ready(function(){
    $('.thumbnail').hover(function(e){
    src = $(e.target).data('main');
    $("#target_img").attr('src', src);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main_image" style="width: 200px; height: 100px">
  <img id="target_img" src="#"/>
</div>

<ul>
  <li>
    <img class="thumbnail" src="https://th.bing.com/th/id/OIP.wx64GmJDu2nd32eO_tieDgHaEK?pid=Api&rs=1" data-main="https://th.bing.com/th/id/OIP.wx64GmJDu2nd32eO_tieDgHaEK?pid=Api&rs=1" width="50px" height="50px"/>
  </li>
  <li>
    <img class="thumbnail" src="https://1.bp.blogspot.com/_138avbqsoJQ/S31zZz9qPZI/AAAAAAAABNQ/ARDHrOa5_pg/s400/Loch_Lomond.JPG" data-main="https://1.bp.blogspot.com/_138avbqsoJQ/S31zZz9qPZI/AAAAAAAABNQ/ARDHrOa5_pg/s400/Loch_Lomond.JPG" width="50px" height="50px"/>
  </li>
</ul>

Answer 2

使用mouseover 和mouseout 事件监听器来改变你的大div 的背景图片。

下面的 sn-p 说明了一切 -

function change(e){
  document.getElementById("main").style.backgroundImage = `url(${e.target.src})`; 
}

let imgs = document.getElementsByTagName("img");

for(let i = 0; i<imgs.length; i++){
  imgs[i].addEventListener("mouseover", function(){
    change(event);
  });
  imgs[i].addEventListener("mouseout", function(){
    document.getElementById("main").style.backgroundImage = `url("https://cdn.pixabay.com/photo/2020/11/28/11/03/advent-5784271__340.jpg")`;
  });
}

#main{ 
  height: 150px;
  width: 150px;
  border: 3px dashed red;
  background-image: url("https://cdn.pixabay.com/photo/2020/11/28/11/03/advent-5784271__340.jpg");
  }

img{
  height: 50px;
  width: 50px;
}

<div id="main"></div>

<img src="https://cdn.pixabay.com/photo/2020/03/24/11/21/winter-4963715__340.jpg">
<img src="https://cdn.pixabay.com/photo/2019/12/10/19/15/new-years-eve-4686590__340.jpg">
<img src="https://cdn.pixabay.com/photo/2020/11/17/15/44/cup-5752775__340.jpg">
<img src="https://cdn.pixabay.com/photo/2019/05/18/13/34/branches-4211837__340.jpg">

目前我不知道您的 html 的结构是什么，但您可以调整此解决方案以适合您的情况。

Answer 3

我创建了一个您指定的交换效果示例，并使用颜色创建了它的代码笔：

https://codepen.io/DaudWaqas/pen/xxEgxLm

<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>

CSS：

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

JS：

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;
}

Answer 4

您可以在 Javascript 中捕获鼠标悬停，然后简单地交换背景图像并在 mouseout 时交换回来。

  const picEls= document.getElementsByClassName('small');
  const largeEl = document.getElementsByClassName('large')[0];
  for (let i=0; i<picEls.length; i++) {
    picEls[i].addEventListener('mouseover', hovered);
    picEls[i].addEventListener('mouseout', hovered);
  }

  function hovered(event) {
    const bg = event.target.style.backgroundImage;
    this.style.backgroundImage = largeEl.style.backgroundImage;
    largeEl.style.backgroundImage = bg;
  }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.pic {
  border-style: solid;
  border-radius: 50%;
  background-size: cover;
}
.large {
  width: 40vw;
  height: 30vw;
  margin: 0 auto 0 auto;  
}
.small {
  display: inline-block;
  width: 20vw;
  height: 15vw;
  margin: 2vw;  
}

<div class="container">
  <div class="large pic" style="background-image: linear-gradient(red,yellow);"></div>
  <div class="small pic" style="background-image: linear-gradient(red,green);"></div>
  <div class="small pic" style="background-image: linear-gradient(green,blue);"></div>
  <div class="small pic" style="background-image: linear-gradient(blue,red);"></div>
  <div class="small pic" style="background-image: linear-gradient(cyan,yellow);"></div>
  <div class="small pic" style="background-image: linear-gradient(yellow,magenta);"></div>
  <div class="small pic" style="background-image: linear-gradient(magenta,cyan);"></div>
  <div class="small pic" style="background-image: linear-gradient(cyan,red);"></div>
  <div class="small pic" style="background-image: linear-gradient(yellow, green);"></div>
</div>