如何仅在使用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标签：

1. 你DIV失去专注所以不匹配：焦点;
2. 按钮被隐藏，因为它还没有获得焦点;
3. 因为div内没有任何可见/可聚焦的东西，所以焦点移动到别的东西上，而不是按钮上。

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

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