显示div而输入是选择使用CSS没有JavaScript [英] show div while input is selected using css without javascript

问题描述

我的问题是，如果无论如何，当我开始在输入中写入时，如果我将鼠标移出.boxdiv，则不会消失。

不知道是否有任何选择器或可能的方式没有任何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> 
  

谢谢

解决方案 div>

是的，它要求您重新排列输入的位置，但它可以完成。

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; 
职位：亲属; 
 width：200px; 
} 
 .overlay {
 position：absolute; 
剩下：0; 
 right：0; 
 bottom：0; 
 top：0; 
 background：rgba（0,0,0,0.6）; 
可见性：隐藏; 
 opacity：0; 
 z-index：1; 
} 
 
 .box输入{
 position：absolute; 
可见性：隐藏; 
 opacity：0; 
宽度：50％; 
 top：0; 
剩下：50％; 
保证金余额：-25％; 
 z-index：2; 
} 
 $ b .box：悬停.overlay，
 .box：悬停输入，
 .box输入：焦点，
 .box输入：焦点+ .overlay 
 {
 visibility：visible; 
 opacity：1; 
} 
  

My question is if anyway when I start to write in the input, not disappear if i slide my mouse out of the ".box" div.

Wonder if any selector or possible way to do without any Javascript.

Here is the example:

http://jsfiddle.net/vzRqY/

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

Thanks

解决方案

Yes, it requires you to rearrange where the input is, but 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;
}

这篇关于显示div而输入是选择使用CSS没有JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！