JQuery карточки div

Question

Есть несколько карточек с одинаковыми классами (item).

<div class="item">
    <div class="element"></div>
</div>

<div class="item">
    <div class="element"></div>
</div>

При наведении на конкретный элемент класса .element, фон это карточки .item должен меняться на красный.

$(function() {
    $('.element').mouseenter(function() {
        $('.item').css('background-color', 'red');
    });
});

Фон именно той карточки, на которую навели мышь, а меняется на всех элементах класса .item. Как сделать так, чтобы при наведении на объект менялся именно фон карточки, на которой он находится?

Answer 1

Используйте контекст $(this) и от него берите ближайший элемент с классом .item

А ещё меняйте стили через CSS, а в JS просто ими оперируйте

$(function() {
    $('.element').mouseenter(function() {
        $('.item').removeClass('active');
        $(this).closest('.item').addClass('active');
    });
});

.active {
    background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="item">
    <div class="element">1</div>
</div>

<div class="item">
    <div class="element">2</div>
</div>

Answer 2

Используйте this для указания на конкретный элемент:

$('.element').mouseenter(function() {
  $(this).parents('.item').css('background-color', 'red');
});

.item {
  padding: 20px;
  border: 1px solid red;
  margin: 10px 0;
}
.element {
  padding: 10px;
  border: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
    <div class="element"></div>
</div>

<div class="item">
    <div class="element"></div>
</div>

БЛОГ НА HUSL

JQuery карточки div

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