divを入力している間にcssを使用してdivを表示しています

Question

私の入力は、入力に書き込もうとしたら、マウスを ".box" divから外すと消えません。

Javascriptを使用せずにセレクタまたは可能な方法があれば不思議です。ここで

は一例です：

http://jsfiddle.net/vzRqY/

<div class="box"> 
    <div class="overlay"><input/></div> 
LOREM IPSUM LOREM IPSUM <br/> 
LOREM IPSUM LOREM IPSUM LOREM IPSUM 
</div> 

おかげ

Answer 1

はい、それはinputがどこにある再配置する必要がありますが、it can be done。

HTML

<div class="box"> 
    <input/> 
    <div class="overlay"></div> 
LOREM IPSUM LOREM IPSUM <br/> 
LOREM IPSUM LOREM IPSUM LOREM IPSUM 
</div> 

CSS

.box{ 
    background : red; 
    padding: 20px; 
    position: relative; 
    width: 200px; 
} 
.overlay{ 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    top: 0;  
    background: rgba(0,0,0,0.6); 
    visibility: hidden; 
    opacity: 0; 
    z-index: 1; 
} 

.box input { 
    position: absolute; 
    visibility: hidden; 
    opacity: 0; 
    width: 50%; 
    top: 0; 
    left: 50%; 
    margin-left: -25%; 
    z-index: 2; 
} 

.box:hover .overlay, 
.box:hover input, 
.box input:focus, 
.box input:focus + .overlay 
{ 
    visibility: visible; 
    opacity: 1; 
} 

Answer 2

このような何かをできるようになる作品で仕様があります：

.box &.overlay input:focus 

このセレクタがします入力ボックスにフォーカスがある場合（つまり、タイプが入力されている場合） d in）、スタイルは.overlay（これを表示する必要があります）に影響します。すべてのブラウザがこの機能をサポートしてい...場合

残念ながら、いくつかの