Utiliser la touche de tabulation pour déclencher la même fonction .hover

-1

Je souhaite utiliser la même fonction .hover (comme indiqué ci-dessous) lorsque vous appuyez sur la touche de tabulation du clavier.Utiliser la touche de tabulation pour déclencher la même fonction .hover

$('.staffContainer .item').hover(
       function() { 
        $(this).find('.staff-layer').fadeIn("fast"); 
        $(this).find('.work-description').fadeIn("fast"); 
        $(this).find('img').addClass('transition'); 
       }, 
       function() { 
        $(this).find('.staff-layer').fadeOut("fast"); 
        $(this).find('.work-description').fadeOut("fast"); 
        $(this).find('img').removeClass('transition'); 
       } 
      ); 
     });

Source

2017-10-09 JBrew30

Le touche Tab ne génère pas un événement hover, il génère focus et blur événements. Pour atteindre la fonctionnalité que vous recherchez, vous pouvez faire quelque chose comme ceci:

function active() { 
    $(this).find('.staff-layer, .work-description').fadeIn("fast"); 
    $(this).find('img').addClass('transition'); 
} 
function inactive() { 
    $(this).find('.staff-layer, .work-description').fadeOut("fast"); 
    $(this).find('img').removeClass('transition'); 
} 
$('.staffContainer .item').hover(active, inactive).focus(active).blur(inactive);

Source

2017-10-09 20:11:42 Titus

Je comprends qu'un bouton d'onglet ne génère pas de stationnaire. Je voudrais juste que le même effet se produise quand un utilisateur appuie sur la touche de tabulation. Ce que je sais = 9 je pense. Désolé, je suis très nouveau sur Javascript et jquery et j'apprends comment convertir des sites non accessibles pour être accessibles. – JBrew30

@JesseBrewer Oui, le 'Tab' a le code clé' 9' mais il est difficile de le faire en utilisant le 'keypress'events. Comme je l'ai mentionné dans ma réponse, vous pouvez utiliser les événements 'focus' et' blur'. Mon exemple ne déclenche pas de survol quand un élément est focalisé mais il exécute la même fonction ('active') qui devrait avoir le même effet. – Titus

@ JBrew30 Super. Je suis heureux d'avoir pu aider. Bonne chance. – Titus

Vous pouvez utiliser l'événement 'flou':

$('.staffContainer .item').bind('blur', 
      function() { 
       $(this).find('.staff-layer').fadeIn("fast"); 
       $(this).find('.work-description').fadeIn("fast"); 
       $(this).find('img').addClass('transition'); 
      }, 
      function() { 
       $(this).find('.staff-layer').fadeOut("fast"); 
       $(this).find('.work-description').fadeOut("fast"); 
       $(this).find('img').removeClass('transition'); 
      } 
     ); 
    });

Source

2017-10-09 20:06:45 Kamal

Utiliser la touche de tabulation pour déclencher la même fonction .hover

Répondre

Questions connexes