将鼠标悬停在内部元素上并更改整个div背景颜色

Question

我正在尝试将鼠标悬停在其中一个子元素上，然后使用类名search-block更改主div背景。问题是我有多个块，因此它正在更改不需要的每个块的背景。这是我的代码：

$('.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

要解决此问题，您需要使用DOM遍历来查找已悬停的元素的父级const cache = {}; const fetchData = (key, arrayOfKeys) => { const result = []; for (let i = 0; i < arrayOfKeys.length; i++) { result.push({ isin: arrayOfKeys[i], data: Math.random() }); } return result; } const getData = (key, arrayOfKeys) => { if (arrayOfKeys.length < 1) return null; const result = []; const keysToFetch = []; for (let i = 0; i < arrayOfKeys.length; i++) { const isin = arrayOfKeys[i]; if (key in cache && isin in cache[key]) { result.push({ isin, data: cache[key][isin] }); } else { keysToFetch.push(isin); } } if (keysToFetch.length > 0) { const response = fetchData(key, keysToFetch); for (let i = 0; i < response.length; i++) { const { isin, data } = response[i]; if (cache[key]) { cache[key][isin] = data; } else { cache[key] = { [isin]: data } } } return [...result, ...response]; } return result; } // getData('123', ['a', 'b']) 。为此，您可以使用.search-block。

还要注意，您可以通过为closest()提供单个处理程序函数（在hover()和mouseenter事件下运行并在两个事件中调用mouseleave来使代码更简洁）案件。试试这个：

toggleClass()

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

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

Answer 2

要基于className定位特定的父级，您可以执行以下操作：

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

Answer 3

在这种情况下，您可以使用纯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>