Как сделать чтоб не все элементы двигались а только один?Чтоб при наведении на одну карточку, одна двигалсь

Question

У меня несколько элементов с таким классом, но при наведении срабатывает сразу на всех элементах с этим классом, как сделать чтобы событие срабатывало только для того элемента, на который наведен курсор мыши?

$('.card1').hover(function () {
    if ($(this).hasClass("active", "1")) {
        $('.card1 .bottom').slideUp(function () {
            $('.card1').removeClass("active");
        });
    } else {
        $('.card1').addClass("active");
        $('.card1 .bottom').stop().slideDown();
    }
});

Вот html

                <div class="card1">
                    <div class="image">
                        <img src="" alt="">
                    </div>
                    <div class="content">
                        <div class="title">
                            <h3>Генератор</h3>
                        </div>
                        <div class="bottom">
                            <p>
                            </p>
                            <a href="" target="_blank">Cайт</a>
                            <a href="" target="_blank"></a>
                        </div>

                    </div>

Answer 1

Попробуйте использовать this вместо .card1 там где вам нужно, что бы код отрабатывал только по элементу на котором произошёл вызов.

Должно получиться что то вроде этого

$('.card1').hover(function () {
    if ($(this).hasClass("active", "1")) {
        $(this).find('.bottom').slideUp(function () {
            $(this).removeClass("active");
        });
    } else {
        $(this).addClass("active");
        $(this).find('.bottom').stop().slideDown();
    }
});

БЛОГ НА HUSL

Как сделать чтоб не все элементы двигались а только один?Чтоб при наведении на одну карточку, одна двигалсь

Ответы (1 шт):