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

Question

我正在寻找问题的答案。我的页面顶部有一个大图像，底部有八个小图像。我想这样做，当你悬停在小图像上时(它也是一个指向不同地方的链接(，大图像会变成这个小图像。如此清晰的解释，两个图像的位置发生了变化。当我解开大图像时，它又变回来了。

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

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

感谢您抽出时间！

Answer 1

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

$(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的背景图像。

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

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中捕获mouseover，只需交换背景图像并在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>