求jquery代码:鼠标经过小图显示大图

[gongshunkai3]

下面是5个小图，上面是5个大图，需求：鼠标经过小图，显示对应的大图。其实就是修改他们的样式。
比如：鼠标经过：小图的样式：<div class="nav-item ks-active"> 大图的样式：<div class="show-img" style="display: block;"> 鼠标移开：小图的样式：<div class="nav-item"> 大图的样式：<div class="show-img">
另外如果鼠标移开了所有的小图，最后移开的那张图需要保留<div class="nav-item ks-active">，就是说小图不能全部<div class="nav-item">，只要保留一个有ks-active


<div id="img-tabs" class="img-show">
<div class="tabs-content-wrap">
<div class="clearfix tabs-content">

<div class="show-img">
<img width="385" height="385" src="http://gi1.md.alicdn.com/bao/uploaded/i1/14150041803604265/T1gyPOFbxeXXXXXXXX_!!0-item_pic.jpg_400x400.jpg">
</div>

<div class="show-img">
<img width="385" height="385" src="http://gi1.md.alicdn.com/imgextra/i1/1734524150/T2tHt1XytXXXXXXXXX_!!1734524150.jpg_400x400.jpg">
</div>

<div class="show-img">
<img width="385" height="385" src="http://gi1.md.alicdn.com/imgextra/i1/1734524150/T2GDXZXrtXXXXXXXXX_!!1734524150.jpg_400x400.jpg">
</div>

<div class="show-img">
<img width="385" height="385" src="http://gi1.md.alicdn.com/imgextra/i1/1734524150/T2UCeDXBFXXXXXXXXX_!!1734524150.jpg_400x400.jpg">
</div>

<div class="show-img">
<img width="385" height="385" src="http://gi4.md.alicdn.com/imgextra/i4/1734524150/T21DXYXqVXXXXXXXXX_!!1734524150.jpg_400x400.jpg">
</div>

</div>
</div>
<div class="tabs-nav-wrap">
<div class="clearfix tabs-nav">

<div class="nav-item ks-active">
<img width="68" height="68" src="http://gi1.md.alicdn.com/bao/uploaded/i1/14150041803604265/T1gyPOFbxeXXXXXXXX_!!0-item_pic.jpg_70x70.jpg" />
</div>

<div class="nav-item">
<img width="68" height="68" src="http://gi1.md.alicdn.com/imgextra/i1/1734524150/T2tHt1XytXXXXXXXXX_!!1734524150.jpg_70x70.jpg" />
</div>

<div class="nav-item">
<img width="68" height="68" src="http://gi1.md.alicdn.com/imgextra/i1/1734524150/T2GDXZXrtXXXXXXXXX_!!1734524150.jpg_70x70.jpg" />
</div>

<div class="nav-item">
<img width="68" height="68" src="http://gi1.md.alicdn.com/imgextra/i1/1734524150/T2UCeDXBFXXXXXXXXX_!!1734524150.jpg_70x70.jpg" />
</div>

<div class="nav-item">
<img width="68" height="68" src="http://gi4.md.alicdn.com/imgextra/i4/1734524150/T21DXYXqVXXXXXXXXX_!!1734524150.jpg_70x70.jpg" />
</div>

</div>
</div>
</div>

[l245319872]

$(function(){
					$(".smallPic img").hover(function(){
						$(".smallPic li").css("border", "#a6a6a6 1px solid")
						$(".display > .pic > img").attr("src", $(this).attr("src"));
						$(this).parent().parent().css("border", "#c2242b 2px solid");
					});
				})

,你代码太乱了,没法看,你参考下 我的吧 原理是一样的

[张含韵]

鼠标经过的时候小图变大图，原理就是鼠标放上去之后这个事件导致图片的src路径发生变化，从小图变成大图；如果怕大图超出范围影响样式，可以将大图显示在一个弹出层中，或者设置绝对定位