show div while input is selected using css without javascript

问题

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

回答1:

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;
}

回答2:

There is a specification in the works that would allow something like this:

.box &.overlay input:focus

This selector will match if the input box has focus (ie. is being typed in), but the styles will affect the .overlay (which is what you need to make it visible).

Unfortunately, few if any browsers support this feature yet...

来源：https://stackoverflow.com/questions/10044403/show-div-while-input-is-selected-using-css-without-javascript

标签

html

css

html5

css3