html - 仅使用 CSS 聚焦时如何允许显示隐藏按钮？

Question

我有一个容器 div，它里面有一个隐藏的 button，它只有在关注容器 div 时才会出现。我想让 button 在聚焦时可见(我想让它可聚焦)。这是一个 fiddle

HTML:

<div class="ads" tabindex="0">
  <button class="close" tabindex="0">X</button>
</div>

CSS:

.ads{
    position: relative;
    display: inline-block;
    border-radius: 0.5625rem;
    border-style: solid;
    border-width: 0.03125rem;
    border-color:  lightgrey;
    background-color:  #ffffff; 
    width: 100%;
    height: 80px;
}
.close{
      display: none; 
      padding: 0; 
      background: transparent;
      border: none; 
      margin-top: 0.5rem; 
      margin-right: 0.5rem; 
      float: right; 
      width: 0.5rem;
      height: 0.5rem;
      background-image: url('delete.png'); 
      background-size: 100% 100%;
}
div.ads:focus{
    background-color:  #ebeded;
}
div.ads:focus .close{
  display:inline-block;
}
button.close:focus{
  display:inline-block;
}

我怎样才能做到这一点？

谢谢。

Answer 1

在任何给定的时刻，只有一个元素可以处于焦点或没有。

但是您的解决方案假设文档中有两个元素同时匹配 :focus 。

这是当您在聚焦的 div 上按 TAB 时的事件序列:

1. 您的 div 失去了焦点，因此与 :focus 不匹配；
2. 按钮被隐藏，因为它还没有获得焦点；
3. 因为 div 焦点内没有可见/可聚焦的东西移动到其他东西而不是按钮。

你应该找到其他解决方案。

更新:可能的 CSS only hack 是使用 opacity:0 而不是 display:none。这里的 Hack 是 opacity:0 元素被认为是仍然显示的元素，因此可聚焦。

input{
  display: block;
  width: 100%;
}
.ads{
    position: relative;
    display: inline-block;
    border-radius: 0.5625rem;
    border-style: solid;
    border-width: 0.03125rem;
    border-color:  lightgrey;
    background-color:  #ffffff; 
    width: 100%;
    height: 80px;
}

.close{
      opacity: 0; 
      padding: 0; 
      background: transparent;
      border: none; 
      margin-top: 0.5rem; 
      margin-right: 0.5rem; 
      float: right; 
      width: 0.5rem;
      height: 0.5rem;
      background-image: url('delete.png'); 
      background-size: 100% 100%;
}

div.ads:focus{
    background-color:  #ebeded;
}
div.ads:focus .close{
  opacity: 1.0;
}
button.close:focus{
  opacity: 1.0;
}

<input type="text" placeholder="press on me and tab two times">
<div class="ads" tabindex="0">
  <button class="close" tabindex="0">X</button>
</div>
<p>
 by the second tab you should see focused button ,but you don't
</p>