Soucis Jquery

Bonsoir, je suis entrain de développer mon site web et j'ai des soucis avec Jquery:

Sur la page compétences, lorsque l'on clique sur unbouton/image) (<button type="button" class="competence_lien" id="hardware"> ), j'aimerais que le titre (<h3 id="competence_hardware">Hardware</h3> ) ne disparaisse pas, lorsque le curseur quitte la zone clickable. Autrement dit, j'aimerais désactiver l'évenement hover uniquement pour ce bouton image quand elle a été cliquée.
J'ai essayé unbind mais ca ne focntionne pas.

Mon code Jquery

    $(document).ready(function()
    {
            $('.details').hide();
            $('.competence h3').hide();
           
            $("button.competence_lien";).hover(
                   
                function()
                {
                    var img=$(this).next( "img" );
                    var titre=$(this).prev("h3";);
                 
                    $(this).prev(titre).slideToggle();
                },
               
                function()
                {
                    $(this).prev( "h3" ).hide("fast";);
                }
               
            );
           
           
            $("button.competence_lien";).click(
                 
                function()
                {
                    titre=$(this).prev("h3";);
                 
                   
                    var id=$(this).attr('id');
                    switch(id)
                    {
                       
                        case 'hardware':
                           
                            afficherDetails(titre,id);
                            break;
                        case 'software':
                            afficherDetails(titre,id);
                            break;
                        case 'reso':
                            afficherDetails(id);
                            break;
                        case 'web':
                            afficherDetails(id);
                            break;
                        default:
                            afficherDetails(id);
                    }
                   
                       
                }
               
               
                       
               
             
            );
           
            function afficherDetails(titre,id)
            {
                $(titre).css('display','block');
                     
                $(".details ";).hide();
                $('#details_'+id+'').show(1000);   
            }
         
       
           function afficherElement(id)
           {
                $('#'+id).show();
           };

et le HTML

    <section id="competences">
                        <div class="competence">
                            <h3 id="competence_hardware">Hardware</h3>
                            <button type="button" class="competence_lien" id="hardware"><img class="competence_illu" src="./img/competences/monter_pc_ret.jpg" title="Montage, réparation de PC et portables"></button>
                           
                        </div>
                         <div class="competence">
                             <h3 id="competence_logiciels">Software</h3>
                             <button type="button" class="competence_lien" id="software"><img class="competence_illu" src="./img/competences/windows_7.jpg" title="Systèmes"></button>
                        </div>
                        <div class="competence">
                            <h3 id="competence_reso">Réseaux</h3>
                            <button type="button" class="competence_lien" id="reso"><img class="competence_illu" src="./img/competences/reseau_ret.jpg" title="Réseaux et infrastructures"></button>
                        </div> 
                        <div class="competence" id="dernier">
                             <h3 id="competence_web">Sites web</h3>
                             <button type="button" class="competence_lien" id="web"><img class="competence_illu" src="./img/competences/dev_web_ret.jpg" title="Developpement web"/></button>
                        </div>
                    </section>
                    <div id="details_hardware" class="details">
                                 <p>Hardware. Aliquam cursus nisl non nisi auctor iaculis. Proin convallis eros non pellentesque gravida. Vestibulum egestas lacus in facilisis blandit. Praesent leo dui, condimentum eu efficitur nec, tincidunt vel enim. Cras vehicula lacinia porta. Nullam a erat placerat, luctus orci faucibus, iaculis dolor. Etiam dui nisl, luctus et aliquam vitae, ultricies at mauris. Duis dictum massa eget sodales aliquet.</p>
                    </div>

Merci pour aide

Tom

C'est presque ca:

en fait je voudrais que le titre du bouton cliqué reste visible même quand la souris sort de la zone "hover" du bouton cliqué. Par contre l'effet hover reste actif pour les autres boutons. Si on clique sur un autre bouton, le titre de l'élément cliqué précédemmment disparait.

Mais je vais essayer de me débrouiller avec ton code et vérifier ma syntaxe.
Je reviendrai demander de l'aide en cas de blocage


Concernant les erreurs de syntaxe à la fin (parenthèses manquante, etc.)
C'est parce que je n'ai pas mis toutes les fonctions présentes dans mon fichier, uniquement celles en rapport avec la page compétences.


merci bcp
Modifié par h_wiz (13 Dec 2014 - 14:06)