Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
1844 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Questions Jquery

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Questions Jquery

n°2245823
tompouss
Petit chat
Posté le 11-12-2014 à 23:10:32  profilanswer
 

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.         );
  22.        
  23.        
  24.         $("button.competence_lien";).click(
  25.              
  26.             function()
  27.             {
  28.                 titre=$(this).prev("h3";);
  29.              
  30.                
  31.                 var id=$(this).attr('id');
  32.                 switch(id)
  33.                 {
  34.                    
  35.                     case 'hardware':
  36.                        
  37.                         afficherDetails(titre,id);
  38.                         break;
  39.                     case 'software':
  40.                         afficherDetails(titre,id);
  41.                         break;
  42.                     case 'reso':
  43.                         afficherDetails(id);
  44.                         break;
  45.                     case 'web':
  46.                         afficherDetails(id);
  47.                         break;
  48.                     default:
  49.                         afficherDetails(id);
  50.                 }
  51.                
  52.                    
  53.             }
  54.            
  55.            
  56.                    
  57.            
  58.          
  59.         );
  60.        
  61.         function afficherDetails(titre,id)
  62.         {
  63.             $(titre).css('display','block');
  64.                  
  65.             $(".details ";).hide();
  66.             $('#details_'+id+'').show(1000);   
  67.         }
  68.      
  69.    
  70.        function afficherElement(id)
  71.        {
  72.             $('#'+id).show();
  73.        };


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


la page en question ici
Merci pour aide
 
Tom


Message édité par tompouss le 12-12-2014 à 17:24:16
mood
Publicité
Posté le 11-12-2014 à 23:10:32  profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Questions Jquery

 

Sujets relatifs
problème avec jquery et fonction load()JQuery> Lancer un script sur un élément créé par JQuery
JQuery pour carte personnalisée (PHP)Récupếrer valeur qui change dans un formulaire en JQUERY
Jquery - aide pour page d'accueil complexeJquery append() sur textarea
[jquery] .change + .eachparser un fichier json avec jquery
Formulaire de questions pour un résultat en fonction des réponsesFondu d'image avec Jquery
Plus de sujets relatifs à : Questions Jquery


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR