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时的事件序列：

你的div失去焦点所以不匹配：焦点;
按钮被隐藏，因为它还没有聚焦;
因为div焦点内部没有任何可见/可聚焦移动到其他内容而不是按钮。

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

更新：可能的CSS只有黑客是使用不透明度：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>

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

1 个答案: