我有以下要显示在焦点上的元素（按Tab后）。
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>我不明白为什么我的解决方案不起作用：
.stub a:focus .pagenav {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}
.pagenav:focus {
display: block;
position: absolute;
top: 100%;
left: -3px;
width: calc(100% + 6px);
}
要使.pagenav集中显示在.stub或.pagenav本身上，我需要做什么？
我不想使用复选框作为解决方案here的建议，因为我不想在HTML中添加多余的行（并且我很难理解复选框）。
向.pagenav添加不透明度是个好主意，但是当未显示.pagenav时（它不知道为什么），它会弄乱.stub的宽度，并且会消除.pagenav内容的居中。我愿意接受包括JS在内的任何解决方案。
您无法聚焦尚未显示的元素（显示：无）。也许您通过显示的一个小辅助元素来处理此问题？