使用css而不使用javascipt选择输入时显示div [英] show div while input is selected using css without javascipt
本文介绍了使用css而不使用javascipt选择输入时显示div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的问题是,无论如何,当我开始写在输入,不消失,如果我将我的鼠标滑出.boxdiv。
不知道有没有任何Javascript的选择器或可能的方式。
p>
感谢
解决方案
code>输入是,但可以完成。 / p>
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输入{
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输入:focus,
.box输入:focus + .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:
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;
}
这篇关于使用css而不使用javascipt选择输入时显示div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文