在标签键上显示悬停菜单按

Question

在这个网站上，我有你可以用鼠标悬停的图像，它会显示两个按钮。我希望只有键盘的用户能够在网站上进行制表，因此当他们选中时，会显示可暂停的菜单。我已经阅读了很多涉及:focus和tabindex=0的解决方案，但我似乎无法使其发挥作用。我试图将tabindex=0放在<a>标签上以查看是否会这样做，但事实并非如此。我相信如果我可以使用tab键显示悬停菜单，那么按钮将被标记为正常。我可能会遗漏一些明显的东西，但我是所有这些东西的初学者。如果通过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

.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;
}

悬停菜单的示例我需要在它们标签时弹出（不用担心，背景img和按钮肯定不会在完成时看起来像这样）：< / p>

Answer 1

一次只能有一个元素具有焦点，因此单独使用:focus不能这样做。这就是:focus-within伪类要解决的问题 - 但要注意浏览器的兼容性; MicroSofts目前的两款浏览器还没有支持它。

您需要JS解决方案或至少需要:focus-within

的polyfill

（仅供参考，div元素默认无法获得焦点，因此您需要首先添加tabindex属性。tabindex="0"通常是您的想要使元素能够在正常的DOM顺序中聚焦。）

  

我不知道＆＃34;焦点＆＃34;真的做我需要做的事情。

它执行其他伪类的操作 - 不多或少：识别/响应处于特定状态的元素。您使用它或它的后代/兄弟姐妹做什么取决于您 - 通过根据父/兄弟姐妹的状态编写以这些元素为目标的选择器。

https://www.google.com/search?q=menu+with+focus-within为您提供更详细的说明＆amp;例子，f.e。 http://www.scottohara.me/blog/2017/05/14/focus-within.html那个人很好地解释了这个主题，并且还提到了一个polyfill，https://allyjs.io/api/style/focus-within.html