Question

我有一个容器，当我点击它时会获得焦点并在其中显示隐藏的内容。

现在，在隐藏容器中，点击它时会有一个按钮获得焦点并关闭父节点。

它适用于除ios和macos上的safari之外的所有浏览器。

我正在寻找一个干净的CSS解决方案。

HTML

<div class="box" tabindex="0">
  <div class="front">CLICK ME</div>
  <div class="hidden">
    <button class="close">close button</button>
  </div>
</div>

SASS

.box{
  position:relative;
  height:200px; width:200px;
}

.front,
.hidden{height:100%; width:100%; position:absolute; }

.close{height:100px; width:100px;}

.box:focus{
  .front{display:none;}
  .hidden{display:block;}
}

.front{background:blue; color:white;}
.hidden{background:red; display:none;}

DEMO

Answer 1

将button标签更改为具有tabindex属性的其他元素（例如DIV），然后它也适用于Safari。

Safari，显然iOS上的其他一些浏览器对按钮有着奇怪的焦点行为。即使使用tabindex，它们似乎永远不会得到关注。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus

实施例

<button class="close">close button</button><!-- not working -->
<!-- Use instead -->
<div class="close" tabindex="0" role="button"></div><!-- working -->

DEMO

Answer 2

iOS解决方案将按住Option键+ Tab键。然后，将在选项卡上显示按钮。

子元素不会在safari浏览器中占据父元素的焦点

2 个答案: