Question

我有一个如下所示的列表：

<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。我不想为所有div添加悬停效果，只是标签的父级

例如：

$('.card-link').hover(function() {
  $(this).$('.card-stackedl').addClass('hover');
}, function() {
  $(this).$('.card-stacked').removeClass('hover');
});

Answer 1

您可以使用jQuery方法 closest() 或 parent() ：

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

希望这有帮助。

＆＃13;

$('.card-link').hover(function() {
  $(this).closest('.card-stacked').addClass('hover');
}, function() {
  $(this).closest('.card-stacked').removeClass('hover');
});

＆＃13;

.hover{
  background-color: yellow;
}

＆＃13;

<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>
--------------

＆＃13;

Answer 2

我认为此文档应该为您提供帮助https://api.jquery.com/category/selectors/

Answer 3

$('.card-link').hover(function() {
                $(this).parents('.card-stacked').addClass('hover');
            }, function() {
                $(this).$('.card-stacked').removeClass('hover');
            });

试试这个。

Answer 4

您必须使用cell.zero_state()方法获取树中的特定父级。您也可以使用.closest()之类的：

＆＃13;

.toggleClass()

＆＃13;

$('.card-link').hover(function(e) {
  $(this).closest('.card-stacked').toggleClass('hover', e.type === 'mouseenter');
});

＆＃13;

.hover {
  background: yellow;
}

＆＃13;

Jquery试图找到特定的父div

4 个答案: