Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Увеличение картинки при наведении курсора (https://javascript.ru/forum/jquery/36505-uvelichenie-kartinki-pri-navedenii-kursora.html)

gigs 17.03.2013 17:33

Увеличение картинки при наведении курсора
 
Помогите пожалуйста, есть скрипт который делает увеличение карнтинки при наведении на нее курсора, вот код:

$(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", а остальные картинки на странице не трогал, то есть чтоб они не увеличивались, а были как есть ?

gigs 17.03.2013 21:40

я выяснил что это из за того что в 13 строке прописано такое: $("a img").hover из за "a img" оно применяет этот скрипт ко всем картинкам.

рони 17.03.2013 23:01

Цитата:

Сообщение от gigs
$("a img")

уточни область действия
$("#ugolkrug a img") или
$(".img a img")


Часовой пояс GMT +3, время: 22:19.