CODEWITHSUNDEEP
javascriptjquery
Yurii
Yurii

Reputation: 61

Need to add class to div on hover of another div

I have a list of div with the same class. Each div contains other divs, .header, .body, .footer. When I hover on one of the elements inside one div, for example .header, I need to add/remove a class on the another .footer element inside the same div.

The problem is when I hover one .header - I'm adding class to all .footer elements inside all other div's but I need to add new class only to the .footer inside the current div.

$(document).ready(function() {
  $('.header').hover(function() {
    $('.footer').addClass('active');
  }, function() {
    $('.footer').removeClass('active');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <div class="list_item">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
  </div>
  <div class="list_item">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
  </div>
  <div class="list_item">
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>
  </div>
</div>

Upvotes: 1

Views: 685

Answers (4)

Nadir
Nadir

Reputation: 71

Yes can try below code snippet, I have tested it already.

$(document).ready(function() {     
    $('.header').hover(function(){     
        $(this).siblings(".footer").addClass('active');    
    },     
    function(){    
        $(this).siblings(".footer").removeClass('active');      
    });
});

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206058

You could use the :hover pseudo in CSS and the general sibling combinator selector ~

.list_item:hover .header:hover ~ .footer {
  background: red;
}
<div class="list">

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

</div>

otherwise, if you cannot rely on .footer being a next sibling - use jQuery

jQuery(function($) {

  $('.header').hover(function() {
    $(this).closest('.list_item').find('.footer').toggleClass('active');
  });
    
});
.active {
  background: red;
}
<div class="list">

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

  <div class="list_item">
    <div class="header">Hover me</div>
    <div class="body">B</div>
    <div class="footer">F</div>
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 3

Pete
Pete

Reputation: 58422

You should be doing it relative to this (which is the current hovered header) and you can use nextAll if that is the only footer in the grouping:

$('.header').hover(function() {
    $(this).nextAll('.footer').addClass('active');
  },
  function() {
    $(this).nextAll('.footer').removeClass('active');
  });
.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">

  <div class="list_item">
    <div class="header"> header </div>
    <div class="body"> body </div>
    <div class="footer"> footer </div>
  </div>
  <div class="list_item">
    <div class="header"> header </div>
    <div class="body"> body </div>
    <div class="footer"> footer </div>
  </div>
  <div class="list_item">
    <div class="header"> header </div>
    <div class="body"> body </div>
    <div class="footer"> footer </div>
  </div>

</div>

Upvotes: 0

Avtandil Zenaishvili
Avtandil Zenaishvili

Reputation: 49

You need to add different ID property all some div, get $('#footer3') and change it

Upvotes: -2

Related Questions