iFrame Css 伪类答案

【问题标题】：iFrame Css Pseudo-classesiFrame Css 伪类
【发布时间】：2017-03-03 23:11:22
【问题描述】：

我正在尝试为使用键盘导航的用户直观地识别我的 iframe，例如制表符

据我所知，只有 :hover 有影响

iframe { border: 1px solid #fff; }    
iframe:hover { border: 1px solid #000; }

当尝试使用 :focus 或 :active 时，它们不起作用：

iframe:focus, iframe:active{ border: 1px solid #f00; }

我们如何让访问者知道他们已通过选项卡访问 iframe 元素？我不是想设计 iframe 的内容，只是 iframe 本身。为什么它支持 :hover 而不是其他的？

更新

tabindex 不是一个选项

a) 它不起作用：https://jsfiddle.net/qk034swn/ b) 如果使用 XHMTL，页面将变为无效

【问题讨论】：

【解决方案1】：

仅仅在 CSS 中添加 :focus 或 :active 是不够的，因为 iframe 不是“可聚焦”。

编辑 - 现在，解决方案

这是一个简单的方法

HTML - <a href="#"><iframe src="http://foo.com"></iframe></a>

CSS - a:focus iframe{border:3px solid red;}

简而言之，我们将使用<a> 标签使iframe 成为焦点。演示 - https://jsfiddle.net/ctqfacgw/1/

【讨论】：

重新更新，这也不是解决方案，您关注的是锚点，而不是 iframe。如果您在激活红色边框时按下回车键，您将被带到锚点 href - 而不是 iframe 内容上。所以你最终会在 http//mywebsite/# 这让情况变得更糟！
您是否希望通过 Tab 键将用户带到 iframe 内的内容？因为如果是这种情况，那么您的问题描述有点误导，它说“我们如何让访问者知道他们已经标签到 iframe 元素？”。

【解决方案2】：

实际上是可制表的吗？我认为你需要让 tab 键真正关注 . 而不是 .您需要在元素上设置一个 href 或使用全局 HTML 属性 tab-index="0"（0 因此它不会中断正常的制表流程）。

【讨论】：