jquery:hover在悬停其中一个元素时更改两个元素

Question

这里是超级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(这个问题在某种程度上与我的另一个问题有关(。

谢谢你的帮助&建议！

David

Answer 1

您可以使用事件的组合：mouseover和mouseleave以及jQuery的.prevAll和.nextAll以及:firstcss选择器来为相应的页眉/摘录上色或将其删除

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

Answer 2

只针对那些同级类。这个只能根据你最初的要求工作。下面的可能对你有用。

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