Помогите пожалуйста, есть скрипт который делает увеличение карнтинки при наведении на нее курсора, вот код:
$(document).ready(function() {
//переменная отступа
var cont_left = $(".sc_menu_wrapper").position().left;
// рапределяем миниатюра по длинне,
// смещая их по горизонтали
$(".img").each(function(index) {
var left = (index * 50) + cont_left;
$(this).css("left", left + "px");
});
$("a img").hover(function() {
// при наведении курсора мыши
$(this).parent().parent().css("z-index", 1);
$(this).animate({
height : "50",
width : "50",
left : "-=5",
top : "-=5"
}, "fast");
}, function() {
// hover out
$(this).parent().parent().css("z-index", 0);
$(this).animate({
height : "35",
width : "35",
left : "+=5",
top : "+=5"
}, "fast");
});
});
<div id="ugolkrug">
<div class="sc_menu_wrapper" style="overflow: hidden;">
<div class="sc_menu" style="display: block;">
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
<div class="img"><a href="#"><img src="imagem_12126.jpg" width="35" height="35"></a></div>
</div>
</div>
</div>
для дива "ugolkrug" он работает нормально, то есть когда я навожу курсор на картинку то она увеличивается, но проблема в том что этот скрипт действует и на другие картинки которые находятся на странице и которые не нужно увеличивать.
Как сделать так чтоб этот скрипт увеличивал только те картинки которые находятся в диве "ugolkrug", а остальные картинки на странице не трогал, то есть чтоб они не увеличивались, а были как есть ?
