query實現鼠標移動/移過到商品小圖片上時替換掉大圖片上的圖片
1 . 實現效果
2 . 代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圖片變換</title>
<style>
.show{width:330px; height:auto; margin:50px auto; background:#eee}
.item{ width:330px; height:auto; float:left; margin:15px;}
p{ padding:15px; color:#ff6600}
.big-photo img{ width:300px; height:400px; border:1px solid #e0e0e0}
.des-small img{ width:30px; height:40px;border:1px solid #e0e0e0; }
.des-small img:hover{ border:1px solid #ff6600}
.clear{clear:both}
</style>
</head>
<body>
<div class="show">
<p>Jquery實現鼠標移動/移過到小圖片上時替換掉大圖片上的圖片</p>
<div class="item">
<a class="big-photo"><img src="http://img4.imgtn.bdimg.com/it/u=1080343512,2178848806&fm=26&gp=0.jpg" tag="big"/></a>
<a class="des-small"><img src="http://img4.imgtn.bdimg.com/it/u=1184104241,3784765089&fm=26&gp=0.jpg" /></a>
<a class="des-small"><img src="http://img0.imgtn.bdimg.com/it/u=2880062395,2491275225&fm=11&gp=0.jpg" /></a>
<a class="des-small"><img src="http://img0.imgtn.bdimg.com/it/u=1624493903,1200566569&fm=11&gp=0.jpg" /></a>
</div>
<div class="clear"></div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".item a").on('mouseenter',function () {
//獲取鼠標移動到元素的scr
var temp_small_src = $(this).find('img').attr('src');
//獲取大圖的元素,然後修改地址爲移動元素的src
$(this).siblings('a').find('img[tag=big]').attr('src',temp_small_src);
})
});
</script>