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

我有一个容器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;
}

我该如何实现？

谢谢。

最佳答案

在任何给定的时刻，只有一个要素可以成为焦点，或者没有焦点。

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

这是在焦点div上按TAB键时的事件序列：


您的div失去了焦点，因此不匹配：focus;
因为尚未获得焦点，所以按钮被隐藏了；
因为div内没有可见/可聚焦的焦点会移动到其他东西，但不会移动到按钮。


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

更新：可能只有CSS的技巧是使用opacity：0而不是display:none。
此处的不足之处是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>

关于html - 仅使用CSS聚焦时，如何允许显示隐藏的按钮？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45653556/