tompouss Petit chat | 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 :
- $(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
Code :
- <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>
|
la page en question ici
Merci pour aide
Tom
Message édité par tompouss le 12-12-2014 à 17:24:16
|
