html - 鼠标悬停时切换图像

Question

我试图让我的代码在悬停在某些已放置的图像上时切换图像。有谁知道解决方案？这是代码:

.first-image {
    float: left;
}
.first-image:hover {
    background-image: url(0-1/0_Hover.png)
}
.second-image {
    float:right;
}
.second-image:hover {
    background-image: url(0-1/1_Hover.png)
}

_

<div class="first-image">
    <a href="https://bi-na-ri-es.com/black-white"><img src="0-1/0_No_Hover.png" width="946" height="1066" alt=""/></a>
</div>

<div class="second-image">
    <img src="0-1/1_No_Hover.png" width="946" height="1066" alt=""/>
</div>

Answer 1

这是使用 Jquery 可以做的最简单的方法:

	$('.first-image').mouseover(function(){
		$(this).toggleClass('second-image');	
	});
	$('.second-image').mouseover(function(){
		$(this).toggleClass('first-image');	
	});
	

.wrapper {
	background-color: coral;
	width:200px;
	height: 100px;
}

.first-image {
    float: left;
}
.first-image:hover {
    background-image: url(0-1/0_Hover.png)
}
.second-image {
    float:right;
}
.second-image:hover {
    bac

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
	<div class="first-image">
			<a href="https://bi-na-ri-es.com/black-white">
			<img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/cc/Googlewave.svg/1273px-Googlewave.svg.png" width="100" height="100" 	alt=""/>
			</a>
	</div>

	<div class="second-image">
	 <a href="https://bi-na-ri-es.com/black-white">
			<img src="https://santatracker.google.com/images/og.png" width="100" height="100" alt=""/>
		</a>
</div>
</div>