如何防止隐藏元素在Chrome中聚焦时显示？

Question

今天我有一个奇怪的问题,在Chrome中,当我专注于一个绝对位于其溢出隐藏容器之外的元素时,它在Chrome浏览器(Mac)中可见.

我做了一个小提琴来说明问题:http://jsfiddle.net/GHgtc/

HTML

    <div id="container">
        <a id="inner-button" href="#">You can see me !</a>
    </div>

CSS

#container{
    display: block;
    background: blue;
    width: 200px;
    height: 30px;
    position: relative;
    overflow: hidden;
}

#inner-button{
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: -20px;
}

谢谢你的帮助 !

干杯!

Answer 1

在“内部按钮”上使用 tabindex="-1"。这会妨碍焦点。 http://jsfiddle.net/GHgtc/2/

<input placeholder="focus on me then press tab" type="text">
<div id="container">
    <a id="inner-button" tabindex="-1" href="#">You can see me !</a>
</div>

更新：

在处理我自己的一些焦点问题时，我意识到您的问题还有另一种可能的解决方案。如果您需要稍后通过 javascript 事件触发焦点，则可以使用 z-index:-1。

#inner-button{
    display: block;
    background: red;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    right: -20px;
    z-index:-1;
}

http://jsfiddle.net/GHgtc/3/

这将使其保持可聚焦但隐藏。您可以使用 z-index:0 动态使其可见。