0
このウェブサイトでは、マウスでマウスを移動すると2つのボタンが表示されます。私は、キーボードのみのユーザーがサイトを介してタブできるようにしたいので、タブをクリックすると、ホバー可能なメニューが表示されます。私は: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;
}
例それが完了したら間違いなくそれのように見えません）：
@floorいいえ、そうすると、目撃ユーザーはボタンを見ることができず（ホバーは消えてしまいます）、フォーカスはボタン（私は、ページ上の別の要素に視覚的に焦点を当てる前に、ホバーメニューの各ボタンに対して2回、タブを2回押す必要があります）が、ホバーメニューが表示されていないので、 。 – Stuff
一度に1つの要素だけがフォーカスできるので、 '：focus'だけではこれを行うことはできません。それは解決するために['：focus-within']（https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within）疑似クラスが作成されたものですが、ブラウザの互換性に注意してください; MicroSoftの現在の2つのブラウザはまだサポートしていません。あなたはJSソリューションか、少なくとも '：focus-within'のためのポリフィルを必要とします。 – CBroe
@CBroeありがとうございました。つまり、すべてのブラウザでサポートされている魔法のような世界では、フォーカスを使用してページをタブで囲むと、実際にタブキーを押す*フォーカスが与えられたときにそのメニューが表示される* ？私はそれが私が本当に立ち往生していると思う - 「焦点」が本当に私がそれをするために必要なことを本当にやっているのかどうかはわかりません。私は、フォーカスがタブまたはクリックされたときにいくつかの方法で要素をハイライト表示しますが、要素がまだ表示されていない場合は実際に要素を表示しますか？私はノーに傾いている。 – Stuff