Gizli öğe, Chrome'da odaklandığında nasıl gösterilmeli?

Question

Bugün, Chrome'da, taşma gizli kapsayıcısından tamamen ayrılmış bir öğeye odaklandığımda, Chrome tarayıcısında (Mac) görünecek tuhaf bir sorunum var.

Sorunu göstermek için bir keman yaptık: 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; 
} 

Yardımlarınız için

teşekkürler!

Şerefe!

Answer 1

"İç düğmenizde" tabindex = "- 1" tuşlarını kullanın. Bu odağı önleyecektir. 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> 

GÜNCELLEME:

kendime ait bazı odak konuyla ilgili çalışmaları sırasında sorununa başka bir olası çözüm yoktur fark etti. İhtiyacınız olan odak daha sonra javascript olayıyla tetiklenecekse z-endeksi: -1 kullanabilirsiniz. o Odaklanabilir ama gizli tutacak

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

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

. Ve bunu z-endeksi ile geriye görünür hale getirebilirsiniz: 0 dinamik olarak.