Увеличение картинки при наведении курсора
Помогите пожалуйста, есть скрипт который делает увеличение карнтинки при наведении на нее курсора, вот код:
$(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", а остальные картинки на странице не трогал, то есть чтоб они не увеличивались, а были как есть ? |
я выяснил что это из за того что в 13 строке прописано такое: $("a img").hover из за "a img" оно применяет этот скрипт ко всем картинкам.
|
Цитата:
$("#ugolkrug a img") или $(".img a img") |
Часовой пояс GMT +3, время: 22:19. |