问题描述
超级jquery初学者在这里。
我以某种方式来到这里。悬停标题时,我也想更改摘录的背景……反之亦然(悬停摘录时,标题的背景也会更改)。
$(document).ready(function(){
$(".heading,.excerpt").hover(
function() { $(this).addClass('is-hover'); },function() { $(this).removeClass('is-hover'); });
});
.heading.is-hover{background-color: red;}
.excerpt.is-hover{background-color:green;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<header class="heading"><h2>Ciao</h2></header>
<div>don't change me</div>
<div class="excerpt">text text text</div>
</div>
<div>
<header class="heading"><h2>hi!</h2></header>
<div>don't change me</div>
<div class="excerpt">text two text two</div>
</div>
我怎样才能从这里继续?我有点卡住了。
我无法更改 html 部分,因此没有纯 css(问题与我的另一个 here 有某种关系)。
感谢您的帮助和建议!
大卫
解决方法
您可以使用以下事件的组合:mouseover
和 mouseleave
以及 jQuery 的 .prevAll
和 .nextAll
以及 :first
css 选择器来为相应的标题着色/摘录或删除
$(document).ready(function(){
$(".heading").on('mouseover',function() {
$(this).addClass('is-hover');
$(this).nextAll('.excerpt:first').addClass('is-hover');
});
$(".excerpt").on('mouseover',function() {
$(this).addClass('is-hover');
$(this).prevAll('.heading:first').addClass('is-hover');
});
$(".heading").on('mouseleave',function() {
$(this).removeClass('is-hover');
$(this).nextAll('.excerpt:first').removeClass('is-hover');
});
$(".excerpt").on('mouseleave',function() {
$(this).removeClass('is-hover');
$(this).prevAll('.heading:first').removeClass('is-hover');
});
});
.heading.is-hover{background-color: red;}
.excerpt.is-hover{background-color:green;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<header class="heading"><h2>CIAO</h2></header>
<div>don't change me</div>
<div class="excerpt">text text text</div>
</div>
<div>
<header class="heading"><h2>hi!</h2></header>
<div>don't change me</div>
<div class="excerpt">text two text two</div>
</div>
只针对那些兄弟类。 这只会根据您的初始要求工作。下面的可能对你有用。
$(document).ready(function(){
$(".heading").hover(
function() { $(this).addClass('is-hover').siblings('.excerpt').addClass('is-hover'); },function() { $(this).removeClass('is-hover').siblings('.excerpt').removeClass('is-hover'); });
});
.heading.is-hover{background-color: red;}
.excerpt.is-hover{background-color:green;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<header class="heading"><h2>CIAO</h2></header>
<div>don't change me</div>
<div class="excerpt">text text text</div>
</div>
<div>
<header class="heading"><h2>hi!</h2></header>
<div>don't change me</div>
<div class="excerpt">text two text two</div>
</div>
或者简单地将全局类添加到包装 div
$('.heading').closest('div').addClass('hover-block');
$('.hover-block').hover(function() {
$(this).addClass('is-hover');
},function(){
$(this).removeClass('is-hover');
});
.is-hover .heading {
background: red;
}
.is-hover .excerpt {
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<header class="heading"><h2>CIAO</h2></header>
<div>don't change me</div>
<div class="excerpt">text text text</div>
</div>
<div>
<header class="heading"><h2>hi!</h2></header>
<div>don't change me</div>
<div class="excerpt">text two text two</div>
</div>