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'events를 사용하는 것은 어렵습니다. 내 대답에서 언급했듯이'focus'와'blur' 이벤트를 사용할 수 있습니다. 내 예제는 요소가 포커스되었을 때 호버를 트리거하지 않지만 같은 효과를 가져야하는 동일한 함수 ('활성')를 실행합니다. – 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 기능을 실행하십시오.

답변

관련 문제