@game802

Каким образом решить проблему с выплывающем блоком?

Добрый день уважаемые знатоки.
Случилась у меня такая проблема... есть код:
var cont_left = $(".price-img-block").position().left;

$("a .im").hover(function() {
id = $(this).attr("for");
    $(this).parent().parent().css({'z-index' : '11100'})
    $(this).animate({
       height: "210",
       width: "210"
    }, 150);
    $("#prod" + id).animate({
       left: "+=25",
       top: "+=55",
       width: "+=15",
       height: "+=15"
    }, 150);
    $("#price" + id).animate({
       left: "+=7",
       top: "+=7",
    }, 150);
}, function() {
	id = $(this).attr("for");

    $(this).parent().parent().css("z-index", 0);
    $(this).animate({
        height: "132",
        width: "132",
       top: "+=100"
    }, 150);
    $("#prod" + id).animate({
       left: "-=25",
       top: "-=55",
       width: "-=15",
       height: "-=15"
    }, 150);
    $("#price" + id).animate({
       left: "-=7",
       top: "-=7",
    }, 150);
});

$(".img").each(function(index) {
    var left = (index * 160) + cont_left;
    $(this).css("left", left + "px");
});

Он делает выплывание (увеличение) картинки при наведении на нее саму и убирает этот эффект.
f3f7d5a192e44e8c8b98f0279e21de14.png
Проблема в том, что у меня есть цена на какой либо из товаров, сделан он в виде верхнего слоя над картинкой.
b1c1492452274a3e897daa25a13ff47e.png
При увеличенном режиме, если навести на этот блок курсор мыши, то блок обратно уменьшается и если навести курсор мышки в пространство рядом с этой ценой, этот блок начинает двигаться.
Каким образом можно реализовать и исправить такую проблему? Большое спасибо!
  • Вопрос задан
  • 140 просмотров
Решения вопроса 1
pointer-events:none;
для цены
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
JustinBieber
@JustinBieber
Звизда
положить в один контейнер и переписать скрипт, чтоб увеличивал весь контейнер
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы