Questions Jquery

Questions Jquery - Javascript/Node.js - Programmation

Marsh Posté le 11-12-2014 à 23:10:32    

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

Code :
  1. $(document).ready(function()
  2. {
  3.         $('.details').hide();
  4.         $('.competence h3').hide();
  5.        
  6.         $("button.competence_lien";).hover(
  7.                
  8.             function()
  9.             {
  10.                 var img=$(this).next( "img" );
  11.                 var titre=$(this).prev("h3";);
  12.              
  13.                 $(this).prev(titre).slideToggle();
  14.             },
  15.            
  16.             function()
  17.             {
  18.                 $(this).prev( "h3" ).hide("fast";);
  19.             }
  20.            
  21.         );
  23.        
  24.        
  25.         $("button.competence_lien";).click(
  26.              
  27.             function()
  28.             {
  29.                 titre=$(this).prev("h3";);
  30.              
  31.                
  32.                 var id=$(this).attr('id');
  33.                 switch(id)
  34.                 {
  35.                    
  36.                     case 'hardware':
  37.                        
  38.                         afficherDetails(titre,id);
  39.                         break;
  40.                     case 'software':
  41.                         afficherDetails(titre,id);
  42.                         break;
  43.                     case 'reso':
  44.                         afficherDetails(id);
  45.                         break;
  46.                     case 'web':
  47.                         afficherDetails(id);
  48.                         break;
  49.                     default:
  50.                         afficherDetails(id);
  51.                 }
  52.                
  53.                    
  54.             }
  55.            
  56.            
  57.                    
  58.            
  59.          
  60.         );
  62.        
  63.         function afficherDetails(titre,id)
  64.         {
  65.             $(titre).css('display','block');
  66.                  
  67.             $(".details ";).hide();
  68.             $('#details_'+id+'').show(1000);   
  69.         }
  70.      
  71.    
  72.        function afficherElement(id)
  73.        {
  74.             $('#'+id).show();
  75.        };


et le HTML
 

Code :
  1. <section id="competences">
  2.                     <div class="competence">
  3.                         <h3 id="competence_hardware">Hardware</h3>
  4.                         <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>
  5.                        
  6.                     </div>
  8.                      <div class="competence">
  9.                          <h3 id="competence_logiciels">Software</h3>
  10.                          <button type="button" class="competence_lien" id="software"><img class="competence_illu" src="./img/competences/windows_7.jpg" title="Systèmes"></button>
  11.                     </div>
  13.                     <div class="competence">
  14.                         <h3 id="competence_reso">Réseaux</h3>
  15.                         <button type="button" class="competence_lien" id="reso"><img class="competence_illu" src="./img/competences/reseau_ret.jpg" title="Réseaux et infrastructures"></button>
  16.                     </div> 
  17.                     <div class="competence" id="dernier">
  18.                          <h3 id="competence_web">Sites web</h3>
  19.                          <button type="button" class="competence_lien" id="web"><img class="competence_illu" src="./img/competences/dev_web_ret.jpg" title="Developpement web"/></button>
  20.                     </div>
  21.                 </section>
  23.                 <div id="details_hardware" class="details">
  24.                              <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>
  26.                 </div>


la page en question ici
Merci pour aide
 
Tom


Message édité par tompouss le 12-12-2014 à 17:24:16
Reply

Marsh Posté le 11-12-2014 à 23:10:32   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed