Tab 키를 누를 때 호버 메뉴 표시

Question

이 웹 사이트에는 마우스로 가리키면 이미지가 두 개 표시됩니다. 키보드 전용 사용자가 사이트를 통해 탭 할 수 있기를 원합니다. 탭을 사용하면 마우스를 가져 가면 메뉴가 나타납니다. :focus 및 tabindex=0과 관련된 많은 솔루션을 읽었지만 제대로 작동하지 않는 것 같습니다. 나는 을 <a> 태그에 넣으려고 시도했으나 그렇게 할 것인지를 확인하려고 시도했지만 그렇지 않습니다. 탭 키를 사용하여 표시 할 호버 메뉴를 얻을 수 있다면 버튼이 잘 탭핑 될 것입니다. 나는 명백한 것을 놓치고 있을지도 모르지만, 나는이 모든 것들로 초보자입니다. CSS를 통해 가능하지 않은 경우 JS 솔루션을 제안 할 수 있습니까?

HTML

<div class="thumbnail thumbnail-medium-short"> 
     <div class="nqspCover-container"> 
      <img src="img/stuff.jpg" alt="Front cover" width="180px" height="233px"> 
      <div class="overlay"> 
       <div class="read-button"><a href="urlhere">Read</a></div> 
       <div class="buy-button"><a href="urlhere">Buy</a></div> 
      </div> 
     </div> 
     <div class="nqsp-caption"> 
      <p>stuff</p> 
     </div> 
    </div> 

CSS 나는 그들이 그것 (에 탭, 배경 IMG와 버튼을 걱정하지 않을 때 팝업 필요 호버 메뉴의

.nqspCover-container { 
position: relative; 
width: 180px; 
height: 233px; 
margin: 0 auto; 
} 

.overlay { 
    position: absolute; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0); 
    transition: background 0.5s ease; 
} 

.nqspCover-container:hover .overlay { 
    background: rgba(0,0,0,.3); 
} 

.buy-button{ 
    margin-top: 40px; 
} 

.read-button, .buy-button{ 
    position: absolute; 
    width: 65px; 
    padding: 5px 15px; 
    border: solid 2px white; 
    opacity: 0; 
    transition: opacity .35s ease; 
} 

.read-button a, .buy-button a{ 
    text-decoration: none; 
    text-align: center; 
    color: white; 
} 

.nqspCover-container:hover .read-button, 
.nqspCover-container:hover .buy-button{ 
    opacity: 1; 
} 

.read-button a:hover, .buy-button a:hover{ 
    text-decoration: underline; 
} 

.read_button a:focus, .buy-button a:focus{ 
    display: block; 
} 

예 완료되면 확실히 보이지 않을 것입니다.) :

Answer 1

한 번에 하나의 요소 만 포커스를 가질 수 있으므로 :focus 만 사용하면이 작업을 수행 할 수 없습니다. 그게 바로 :focus-within 의사 클래스가 해결하려고 만든 것이지만 브라우저 호환성을 알고 있어야합니다. MicroSoft의 현재 두 브라우저는 아직 지원하지 않습니다.

당신은

---

:focus-within에 대한 JS 솔루션 또는 적어도 polyfill이 필요합니다 당신이 tabindex 속성을 추가하여 시작하는 데 필요한 것 때문에 (참고로, div 요소는 기본적으로 포커스를받을 수 없습니다 . tabindex="0"는 당신이 요소가 포커스를-수있는 일반 DOM 순서로 만들기 위해 원하는 것을 일반적이다.)

---

나는 "초점"알고하지 않습니다 정말이 작업을 수행하는 데 필요하지 않습니다 모두.

다른 유사 클래스가하는 일도 - 많지도 적지도 않음 : 특정 상태에있는 요소를 식별/대응합니다. 자손 또는 형제 자매가하는 일은 부모/형제 상태를 기반으로 해당 요소를 대상으로하는 선택기를 작성하여 결정합니다.

https://www.google.com/search?q=menu+with+focus-within은 더 자세한 설명을 제공합니다. & 예, f.e. http://www.scottohara.me/blog/2017/05/14/focus-within.html 그 주제가 꽤 잘 설명되어 있고 polyfill도 언급되어 있습니다. https://allyjs.io/api/style/focus-within.html