jquery：悬停其中一个元素时，悬停更改两个元素

如何解决jquery：悬停其中一个元素时，悬停更改两个元素

超级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>