Sélectionner l'enfants à l'événement

Par WhiteAssss, il y a 9 ans

Javascript

Bonjour,

Voila j'aimerai qu'au survol d'une div la div qui est contenu dans celle-ci s'affiche. J'ai fait ceci en javascript mais je n'arrive pas à intégrer la notion de firstChild. Voilà mon code :

var element = document.getElementsByClassName("select"); for (var i = 0; i < element.length; i++){ var el = element[i]; el.addEventListener('mouseover', function(){ this.classList.add('show'); }) el.addEventListener('mouseout', function(){ this.classList.remove('show'); }) }

Voici mon code HTML :

<div class="select first-techno"> <div class="hidden"> <h2>Bla</h2> <p>bla bla bla bla lba.</p> <button type="button">En savoir +</button> </div> </div> <div class="select second-techno"> <div class="hidden"> <h2 >Bla</h2> <p>Bla bla bla</p> <button type="button">En savoir +</button> </div> </div>

Merci pour votre aide, bonne journé à vous tous.

6 réponses

WhiteAssss, il y a 9 ans

Merci pour la réponse rapide mais pour tu m´expliquer pour le [0] ? J´ai lu le topoc anlgais mais j´ai pas compris.

Encore merci

Frosty-Z, il y a 9 ans

En fait le .children correspond à un tableau avec tous les enfants ; le [0] est là pour récupérer le premier (en supposant qu'il existe).

WhiteAssss, il y a 9 ans

Ok mais pourquoi je ne peut pas utiliser firstChild ? Juste pour comprendre car je suis un newbie en JavaScript
Merci

Frosty-Z, il y a 9 ans

Tu peux peut être utiliser firstChild mais s'il y a des espaces entre la définition du <div> parent et celle du premier vrai élément enfant (ici un <div class="hidden">), la valeur de firstChild a toutes les chances d'être un noeud correspondant à ces espaces (je sais pas si je suis très clair)
Alors qu'avec children[0] tu récupères vraiment le premier sous-élément HTML de ton parent.
Voir un problème très similaire ici : https://openclassrooms.com/forum/sujet/firstchild-ne-renvoie-rien
Et aussi la référence MDN :
https://developer.mozilla.org/fr/docs/Web/API/Node/firstChild
https://developer.mozilla.org/fr/docs/Web/API/ParentNode/children

WhiteAssss, il y a 9 ans

Merci beaucoup maintenant je comprend mieux. J´ai pas d´ordinateur sous la mains mais je test cela demain. Encore merci pour ton aide.

Bonne soirée