Наведите курсор на внутренний элемент и измените цвет фона div

Question

Я пытаюсь добиться, когда наведите курсор на один из дочерних элементов, затем измените основной фон div с именем класса search-block.Проблема в том, что у меня есть несколько блоков, поэтому он меняет фон каждого блока, который мне не нужен.Это мой код:

$('.btn').hover(function() {
  $('.search-block').addClass('search-boxshadow');
}, function() {
  $('.search-block').removeClass('search-boxshadow')
});

.search-boxshadow {
  background-color: red;
  transition: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row-eq-height search-block pers-load">
  <div class="col-lg-12 add flush col-sm-12 col-xs-12">
    <div class="tablerow">
      <div class="tablecell">
        <div class="col-lg-12 col-sm-12 col-xs-12">
          <blockquote>COnatct</blockquote>
          <span>05/07/2018</span>
          <a class="btn hidden-xs" href="#">PRIMARY</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row-eq-height search-block pers-load">
  <div class="col-lg-12 add flush col-sm-12 col-xs-12">
    <div class="tablerow">
      <div class="tablecell">
        <div class="col-lg-12 col-sm-12 col-xs-12">
          <blockquote>COnatct</blockquote>
          <span>05/07/2018</span>
          <a class="btn hidden-xs" href="#">PRIMARY</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Чтобы настроить таргетинг на конкретного родителя на основе className, вы можете сделать следующее:

$('.btn-list').click(function() {
    $(this).parents('.parentClass').toggleClass('test')
});

Answer 2

В этом конкретном случае вы можете сделать это с чистым CSS:

.search-block {
  position: relative;
  z-index: 0;
}

.btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: 0.5s;
}

.btn:hover::before {
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row-eq-height search-block pers-load">
    <div class="col-lg-12 add flush col-sm-12 col-xs-12">
      <div class="tablerow">
        <div class="tablecell">
          <div class="col-lg-12 col-sm-12 col-xs-12">
            <blockquote>COnatct</blockquote>
            <span>05/07/2018</span>
            <a class="btn " href="#">PRIMARY</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row-eq-height search-block pers-load">
    <div class="col-lg-12 add flush col-sm-12 col-xs-12">
      <div class="tablerow">
        <div class="tablecell">
          <div class="col-lg-12 col-sm-12 col-xs-12">
            <blockquote>COnatct</blockquote>
            <span>05/07/2018</span>
            <a class="btn" href="#">PRIMARY</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

Чтобы исправить это, вам нужно использовать обход DOM, чтобы найти родителя .search-block элемента, который был найден.Для этого в jQuery вы можете использовать closest().

Также обратите внимание, что вы можете сделать код более лаконичным, предоставив единственную функцию-обработчик для hover(), которая запускается как при событиях mouseenter, так и mouseleave и вызывает toggleClass() в обоих случаях.Попробуйте это:

$('.btn').hover(function() {
  $(this).closest('.search-block').toggleClass('search-boxshadow');
});

.search-boxshadow {
  background-color: red;
  transition: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-eq-height search-block pers-load">
  <div class="col-lg-12 add flush col-sm-12 col-xs-12">
    <div class="tablerow">
      <div class="tablecell">
        <div class="col-lg-12 col-sm-12 col-xs-12">
          <blockquote>COnatct</blockquote>
          <span>05/07/2018</span>
          <a class="btn hidden-xs" href="#">PRIMARY</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row-eq-height search-block pers-load">
  <div class="col-lg-12 add flush col-sm-12 col-xs-12">
    <div class="tablerow">
      <div class="tablecell">
        <div class="col-lg-12 col-sm-12 col-xs-12">
          <blockquote>COnatct</blockquote>
          <span>05/07/2018</span>
          <a class="btn hidden-xs" href="#">PRIMARY</a>
        </div>
      </div>
    </div>
  </div>
</div>