如何防止在Chrome中關注隱藏元素？

今天我有一個奇怪的問題，在Chrome中，當我專注於一個絕對定位在溢出隱藏容器外的元素時，它在Chrome瀏覽器（Mac）中可見。如何防止在Chrome中關注隱藏元素？

我做了一個小提琴來說明這個問題：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; 
}

感謝您的幫助！

乾杯！

來源

2013-04-18 Yukulelix

好吧，這是令人毛骨悚然的...... – xpy

即使你使用'＃inner-button：focus {right：-40px;}'它會變得可見，因爲它會失去焦點。 – xpy

有關信息，同樣適用於FF。 – xpy

在「內部按鈕」上使用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>

UPDATE：

我意識到還有另外一種可能的解決方案，以您的問題我自己的一些焦點問題的工作時。如果您需要的焦點稍後會通過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動態顯示它。

來源

2013-04-19 09:01:12 hexalys

嗨，是的，我開始使用該解決方案，但它阻止了焦點，這是不需要的。問題是如何保持焦點沒有這種奇怪的副作用... – Yukulelix

好啊。如果您選中此選項，錨鏈接將會聚焦，這是屏幕閱讀器或「僅鍵盤」導航所需的與輔助功能相關的行爲。這實際上很正常。它似乎只是在Safari上只顯示它具有通用訪問協助...如果您想隱藏該內部按鈕，直到發生另一個事件，那麼如何首先隱藏該按鈕：hidden; ？你的位置：絕對;方法在技術上目前不隱藏該按鈕。只有知名度：隱藏;或顯示：無;實際上在聚焦時會隱藏它。即重點鏈接將始終顯示爲可訪問性原因。 – hexalys

如何防止在Chrome中關注隱藏元素？

回答

相關問題