使用Tab鍵激發相同的.hover功能

-1

我想在按下鍵盤上的Tab鍵時觸發相同的.hover功能（如下所示）。使用Tab鍵激發相同的.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'); 
       } 
      ); 
     });

來源

2017-10-09 JBrew30

的標籤按鈕不會產生hover事件，它產生focus和blur事件。要實現您正在尋找的功能，您可以這樣做：

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);

來源

2017-10-09 20:11:42 Titus

我明白一個標籤按鈕不會產生懸停。我只是想在用戶按下Tab鍵時發生同樣的效果。我認爲= 9我認爲。抱歉，我對Javascript和jquery很陌生，我正在學習如何將非可訪問站點轉換爲可訪問。 – JBrew30

@JesseBrewer是的，'Tab'鍵碼是'9'，但使用'keypress'事件很難做到這一點。正如我在我的回答中所提到的，您可以使用「焦點」和「模糊」事件。我的例子沒有觸發懸停當一個元素被聚焦，但它執行相同的功能（'活動'），應該有相同的效果。 – Titus

@ JBrew30太棒了。我很高興能夠提供幫助。祝你好運。 – Titus

您可以使用 '模糊' 事件：

$('.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'); 
      } 
     ); 
    });

來源

2017-10-09 20:06:45 Kamal

使用Tab鍵激發相同的.hover功能

回答

相關問題