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

<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href=""></a>
    </div>
  </div>
</div>
--------------

<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href=""></a>
    </div>
  </div>
</div>
--------------
<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href=""></a>
    </div>
  </div>
</div>

Сейчас я пытаюсь добавить эффект при наведении курсора к стеку , когда пользователь наводит курсор на ссылку ссылка на карту , но единственная проблема заключается в том, что я не знаю, как нацеливаться на конкретный див. Я не хочу добавлять эффект наведения ко всем элементам div, только родительский тег

Например:

$('.card-link').hover(function() {
  $(this).$('.card-stackedl').addClass('hover');
}, function() {
  $(this).$('.card-stacked').removeClass('hover');
});
2
user2636197 13 Дек 2016 в 20:45

4 ответа

Лучший ответ

Вы можете использовать методы jQuery closest() или parent() .

$(this).closest('.card-stacked').addClass('hover');
//OR
$(this).parents('.card-stacked').addClass('hover');

Надеюсь это поможет.

$('.card-link').hover(function() {
  $(this).closest('.card-stacked').addClass('hover');
}, function() {
  $(this).closest('.card-stacked').removeClass('hover');
});
.hover{
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href="">card-link</a>
    </div>
  </div>
</div>
--------------

<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href="">card-link</a>
    </div>
  </div>
</div>
--------------
<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href="">card-link</a>
    </div>
  </div>
</div>
--------------
2
Zakaria Acharki 13 Дек 2016 в 17:47

Вы должны использовать метод .closest(), чтобы получить определенного родителя в дереве. Вы также можете использовать .toggleClass() как:

$('.card-link').hover(function(e) {
  $(this).closest('.card-stacked').toggleClass('hover', e.type === 'mouseenter');
});
.hover {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href="">card-link</a>
    </div>
  </div>
</div>
--------------

<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href="">card-link</a>
    </div>
  </div>
</div>
--------------
<div class="col12">
  <div class="card-stacked">
    <div class="card-content">
      <a class="card-link" href="">card-link</a>
    </div>
  </div>
</div>
--------------
0
Jai 13 Дек 2016 в 17:53

Я думаю, что эта документация должна помочь вам здесь https://api.jquery.com/category/selectors /

0
Raymon Winsor Lorne Johnstone 13 Дек 2016 в 17:48
$('.card-link').hover(function() {
                $(this).parents('.card-stacked').addClass('hover');
            }, function() {
                $(this).$('.card-stacked').removeClass('hover');
            });

Попробуй это.

0
Star_Man 13 Дек 2016 в 17:49