1

私の質問は、とにかく入力を書き始めたときに、マウスを「.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>

ありがとう

4

2 に答える 2

2

はい、ある場所を再配置する必要がありますがinput、実行できます。

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-06T13:59:40.927 に答える
-2

次のようなものを許可する仕様があります。

.box &.overlay input:focus

このセレクターは、入力ボックスにフォーカスがある (つまり、入力されている) 場合に一致しますが、スタイルは.overlay(表示するために必要なもの) に影響します。

残念ながら、この機能をサポートしているブラウザはまだほとんどありません...

于 2012-04-06T13:54:40.773 に答える