Sélecteurs jQuery

Alex-trem
Javascript

Bonjour,

j'aimerai que lorsque je passe la souri sur une image, le texte qui est dessus disparaisse, le problème c'est que je n'arrive pas à sélectionner uniquement le texte contenu sur l'image survolé, ce sont tous les texte de toutes les images qui disparaissent.

Ce que je fais

{% for s in scolaire %}
<div class="listProjets">
          <a id="aBleu" class="nav nav-link mx-auto" href="#">
            <p class="desc">{{ s.support_name }}</p>
            <img id="imageAlaUne" src="{{DOCUMENT_ROOT}}/css/tmp/la_une/{{s.image}}" />
          </a>
 </div>
 {% endfor %}
$('.listProjets').hover(function () {
    $('.desc').css({'opacity': 0})
})
$('.listProjets').mouseleave(function () {
    $('.desc').css({'opacity': 1})
})

J'ai essayé en mettant un id, ça retire toujours le texte de la première image donc ce n'est pas bon,
j'ai également essayé cette syntaxe : ('.listProjets > .desc') mais ça ne fonctionne pas, ni avec + ou ~
et j'ai essayé d'utiliser this mais sans succés...

3 réponses

Azorgh
Réponse acceptée

Salut Alex,

Un peu de révisions sur les sélecteurs CSS ne te feraient pas de mal je pense !

A savoir (ou pour rappel) un id doit être unique. Vu que tu es dans une boucle ({% for s in scolaire %}), tu vas créer plusieurs fois le lien id="aBleu". (Il faut donc enlever l'ID, ou générer un ID unique).

Plusieurs solutions :

  • Utiliser une classe sur le lien plutôt qu'un id
  • Cibler correctement tes éléments

J'opterai pour la seconde solution, comme suit :

//Au hover sur le a dans .listProjets
$('.listProjets > a').hover(function () {
    //On va chercher le p.desc DANS le a qui est :hover
    $(this).find('p.desc').css({'opacity': 0});
})
Alex-trem
Auteur

Merci beaucoup pour ces explications et pour la decouverte de find(), je l'ai vu nul part dans mes recherches sur les selecteurs...
Par contre ".desc" suffit pour que ça fonctionne, est ce qu'il y a une raison de mettre le "p" devant ou c'est une manière de faire ?

Azorgh

Hello,

N'hésites pas à passer ton sujet en résolu en sélectionnant la réponse qui t'a aidé ;)

C'est une préférence de ma part de mettre p.desc au lieu de .desc. Les 2 vont fonctionner mais c'est une question de préférence.