【发布时间】：2020-05-08 16:00:48
【问题描述】：
我有以下想要出现在焦点上的元素。通过按键盘上的 Tab 键浏览网页时。
我有默认隐藏的 .pagemenu，当我将鼠标悬停在 .stub 上时会出现。当我通过键盘上的 Tab 按钮导航页面时，我希望 .pagemenu 出现（可访问性）。
通常，:focus 完全符合我的需要。通常，当我将:focus 用于元素时，使用background color 之类的属性时，背景颜色会发生变化，但为.stub 或.pagenav 设置:focus 不起作用。
好的，我现在明白了，不可能专注于未显示的元素，所以我不能专注于 .pagenav。但我可以专注于.sub，不是吗？那为什么这不起作用：
.stub a:focus .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}
我不想像here 建议的那样使用复选框，因为我不想在 HTML 中添加额外的行（而且我无法理解复选框）。
为 .pagenav 添加不透明度是个好主意，但是当 .pagenav 不显示时（不知道为什么），它会与 .stub 的宽度混淆，并且会消除 .pagenav 内容的居中。我愿意接受任何解决方案，包括 JS。
下面的gengns 提出了一个不透明的解决方案，可以消除上述问题，但仍然不能解决选项卡上:focus 的问题。
我需要做什么才能使 .pagenav 出现在 .stub 或 .pagenav 本身的焦点上？
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("stub").style.top = "0";
} else {
document.getElementById("stub").style.top = "150px";
}
prevScrollpos = currentScrollPos;
}.stub {
background-color: #577284;
float: right;
position: fixed;
right: 0;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
padding: 10px;
border: 3px solid #ff8000;
margin-right: 1em;
}
#stublink {
color: #F3E0BE;
text-decoration: none;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}
.pagenav {
background-color: #577284;
display: none;
text-transform: uppercase;
font-size: 0.8em;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-weight: 700;
border: 3px solid #ff8000;
border-top: none;
padding-bottom: 10px;
}
.pagenav a {
display: block;
color: #F3E0BE;
padding: 6px 0px 0px 8px;
}
.pagenav a:hover {
box-shadow: inset 5px 0 0 0 #ff8000
}
body {
height: 200vh
}
;
@media only screen and (max-width: 670px) {
.stub {
right: 0;
left: auto;
top: 0;
bottom: auto;
}
.stub:hover .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}
}<body>
<div class="stub" id="stub">
<div class="pagenav">
<a href="#last">
<table>
<tr>
<td>02.19 03.20</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#previous">
<table>
<tr>
<td>02.18 02.19</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#dec17">
<table>
<tr>
<td>12.17 04.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#nov17">
<table>
<tr>
<td>11.17 01.18</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep16">
<table>
<tr>
<td>09.16 11.17</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#sep15">
<table>
<tr>
<td>09.15 08.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan15">
<table>
<tr>
<td>01.15 03.16</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
<a href="#jan14">
<table>
<tr>
<td>01.14 08.15</td>
<td>:</td>
<td class="two"></td>
</tr>
</table>
</a>
</div><a id="stublink" href=#>Pagemenu</a>
</div>
<script></script>
</body>【问题讨论】：
标签： javascript html css