HTML实现鼠标悬浮、移走图片更改效果的几种方法
1,通过更改图片坐标,对图片添加阴影实现更改图片的颜色原图片效果展示:2,通过jQuery中的鼠标悬浮和移除时间更改图片效果效果图:
·
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"/>
效果图:
更多推荐
已为社区贡献1条内容
所有评论(0)