show div while input using css without javascript

我的問題是如果無論如何，當我開始在輸入中寫入時，如果我將鼠標移出「.box」div，不會消失。show div while input using css without javascript

不知道是否有任何選擇器或可能的方式沒有任何Javascript。

這裏是例子：

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

感謝

來源

2012-04-06 Ricardo Rodrigues

是的，它需要你重新排列，其中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; 
}

來源

2012-04-06 13:59:40 ScottS

是我的願望，所以解決方案是在外面思考。 :) – 2012-04-06 14:04:32

@ RicardoRodrigues - 哦，好了！如果我可以給你+10代表這個評論，我會:-)。 – ScottS 2012-04-06 14:11:23

只是想知道你能做一個表嗎？而是做一個有很多輸入的div。當一個選擇它保持形式？ http://jsfiddle.net/vzRqY/9/ - >你可以爲這種情況嗎？ – 2012-04-06 14:42:16

-2

有在作品中的規範，將允許這樣的事情：

.box &.overlay input:focus

這個選擇器將如果輸入框具有焦點，則匹配（即正在輸入d中），但樣式會影響.overlay（這是您需要使其可見）。

不幸的是，如果一些瀏覽器的任何支持此功能，但...

來源

2012-04-06 13:54:40

你在例嘗試？任何文件？ – 2012-04-06 13:56:44

show div while input using css without javascript

回答

相關問題