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动态显示它。

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

1 个答案: