1
votes

Besoin d'ajouter une classe à div au survol d'un autre div

J'ai une liste de div avec la même classe. Chaque div contient d'autres div, .header , .body , .footer . Lorsque je passe la souris sur l'un des éléments à l'intérieur d'un div, par exemple .header , je dois ajouter / supprimer une classe sur un autre élément .footer dans le même div.

Le problème est lorsque je passe la souris sur un .header - j'ajoute une classe à tous les éléments .footer à l'intérieur de tous les autres div mais je dois ajouter une nouvelle classe uniquement à le .footer à l'intérieur du div actuel.

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

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

javascript jquery

1 commentaires

Vous devriez utiliser CSS pour cela, pas JS.

4 Réponses :

-2
votes

Vous devez ajouter une propriété d'ID différente à tous les div, obtenir $ ('# footer3') et le modifier

1 commentaires

Non. C'est littéralement la pire approche pour résoudre ce problème.

0
votes

Vous devriez le faire par rapport à ceci (qui est l'en-tête actuellement survolé) et vous pouvez utiliser nextAll si c'est le seul pied de page du regroupement:

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

.active {
  color: red;
}

$('.header').hover(function() {
    $(this).nextAll('.footer').addClass('active');
  },
  function() {
    $(this).nextAll('.footer').removeClass('active');
  });

0 commentaires

3
votes

Vous pouvez utiliser le pseudo : hover en CSS et le sélecteur général du combinateur frère ~

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

.active {
  background: red;
}

sinon, si vous ne pouvez pas compter sur .footer comme prochain frère - utilisez jQuery

jQuery(function($) {

  $('.header').hover(function() {
    $(this).closest('.list_item').find('.footer').toggleClass('active');
  });
    
});

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

.list_item:hover .header:hover ~ .footer {
  background: red;
}

0 commentaires

0
votes

Oui, je peux essayer l'extrait de code ci-dessous, je l'ai déjà testé.

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

0 commentaires