HTML实现鼠标悬浮、移走图片更改效果的几种方法

1，通过更改图片坐标，对图片添加阴影实现更改图片的颜色

 

<style type="text/css">
	.imgtest{
		display: inline-block;
		width:20px;
		height:20px;
		overflow：hidden;
	}
	img{
		width: 30px;
		filter:opacity(0.5);
	}
	.imgtest:hover img{
        /*将图片向上偏移*/
		transform: translateY(-50px);

        /*绘制图片的阴影，并将阴影挪回原来位置。
            drop-shadow参数含义颜色、x轴偏移量、y轴偏移量*/
	    filter: drop-shadow(#66ccff 0 50px);
		
	}
</style>


<div class="imgtest">
   	<img src="img/buycar.png">
</div>

原图片

效果展示：

2，通过jQuery中的鼠标悬浮和移除时间更改图片效果

<!--引入jQuery-->
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//图片鼠标悬停事件		
		$("#box_img").mouseover(function(){
			this.src="./img/find.png";
            //也可通过attr来更改图片路径
            //this.attr("src","./img/find.png");
		});
		$("#box_img").mouseout(function(){
			this.src="./img/buycar.png";
		});
	});
</script>


<img id="box_img"  src="img/buycar.png"/>

效果图：