Как с помощью Jquery показать скрытую кнопку с анимацией при наведении на блок?

Question

[Даниил Конев]

Как с помощью Jquery показать скрытую кнопку с анимацией при наведении на блок (.product_box) только для текущего блока, а не для всех, как сейчас.

Сейчас у меня такой код, показывает сразу на всех карточках кнопку без анимации:

jQuery(".product_box").hover(
              function () {
                  jQuery(".button").fadeIn("fast").show();
              }, 
              function () {
                  jQuery(".button").fadeOut("fast").hide();
              }
          );

Применяю на карточках тут: https://dk-web.site/catalog.html

Comments

[Froggyweb]

можно с помощью css :hover зачем там js - не понимаю.

[Сергей Сергей]

jQuery(".product_box").hover(
    function () {
        jQuery(".button",this).fadeIn("fast");
    }, 
    function () {
        jQuery(".button",this).fadeOut("fast");
    }
);

[Даниил Конев]

Froggyweb, да, я делал, но там не работает анимация. Я пробовал transition и он не срабатывал.

[Даниил Конев]

Сергей Сергей, супер, почитал про this, есть теперь понимание, что ключевое слово this относиться к тому объекту, в методе которого оно используется :) Теперь работает на определенные товар ховер !

Answer 1

[Даниил Конев]

Спасибо Сергей Сергей

В итоге мой код:

<script>
            jQuery(".product_box").hover(
                function () {
                    jQuery(".button",this).fadeTo("fast",1);
                }, 
                function () {
                    jQuery(".button",this).fadeOut(500);
                }
            );
      </script>