jQuery fondu avant/arrière au passage de la souris?

Question

J'ai des liens dans la structure suivante et je voudrais savoir ce que le jQuery/css devrait être pour cacher les balises <img /> et les fondre au passage de la souris.

L'idée ici est que le code HTML <img> est masqué et apparaît au passage de la souris pour fournir un effet lisse.

Pendant ce temps, un arrière-plan CSS apparaît au début.

HTML:

< div id = "nav" >

< a href = "bla" id = "ID1" >

< img src = "hoverimg. png "alt =" Lien Texte 1 " /> <span> Lien Texte 1 </span > </a >

< img src = "hoverimg2.png" alt = "Link Text 2" /> < durée > Link Text 2 </span > </a >

</div >

CSS:

#nav a span{ 
    display: none; /* Hide the text reader title */ 
} 

#nav a { 
    display: block; 
    height: 200px; 
    width: 250px; 
    background url("bgimage.png"); /* I would ideally use the # selector for individual links.. */ 
} 

#nav a img{ 
    /* what goes here so that jQuery works and so that we can backwards compatibility a:hover effect? */ 
} 

jQuery:

??? 

Sur une note de côté, je l'ai remarqué que jQuery fonctionnera une animation plusieurs fois lorsque l'élément cible est un nœud enfant qui est imbriqué quelques niveaux Profond. Y at-il un moyen d'arrêter cela?

Answer 1

il suffit d'ajouter un style="display: none;" attr au code HTML d'image, puis utilisez ceci:

 $("#nav").hover(
      function() { 
       $("img", this).show(); 
      }, 
      function() { 
       $("img", this).hide(); 
      }); 

(Modifier effets pour vos besoins si montrer/cacher est pas ce que vous avez besoin)