jquery :hover change two elements when hovering one of them

Question

super jquery beginner here.

I somehow came to this. When hovering the heading I'd like to change the background of the excerpt too ... and viceversa (when hovering the excerpt the background of the heading will change too).

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

How can I go on from here? I'm kind of stuck.

I can't change the html part, so no pure css (the question is somehow related my other one here).

thank you for your help & suggestions!

David

Ryan Wilson · Accepted Answer · 2021-04-19T19:14:44.747

You can use a combination of events: mouseover and mouseleave and jQuery's .prevAll and .nextAll and the :first css selector to color the corresponding header/excerpt or remove it

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

Thanks. The code you posted only works if the two elements are next to each-other, right? What if there's something in between that doesn't have to change on hover? (see my updated example) ... that's why I was using (this), but I'm not sure on how to "link" the element referred in (this) with the other that has to change. — Dande, Apr 19 '21 at 19:10
@Dande See updated answer. Changed to using a combination of `prevAll` and `nextAll` with `:first`, now it does what you asked. You should have included the fact that you had an element in between when you posted, that was important information. — Ryan Wilson, Apr 19 '21 at 19:16

prettyInPink · Answer 2 · 2021-04-19T19:52:06.727

Just target those sibling classes. This one will only work according to your initial request. The below one will maybe work for you.

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

Or simply add a global class to the wrapping 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>

jquery :hover change two elements when hovering one of them

2 Answers2