我正在尝试将鼠标悬停在其中一个子元素上,然后使用类名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>
答案 0 :(得分: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;
}
答案 1 :(得分:1)
要基于className定位特定的父级,您可以执行以下操作:
$('.btn-list').click(function() {
$(this).parents('.parentClass').toggleClass('test')
});
答案 2 :(得分:0)
在这种情况下,您可以使用纯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>