2

幅400pxの入力フィールドがあります。ホバーすると幅が 500px に増え、フォーカスすると幅が 500px に増えたままになります。テキストを書き留めてクリックすると、入力フィールドが 400px 幅に戻ります。フィールドにテキストを書き留めてクリックした後、入力フィールドを幅 500px のままにしたい、または TAB を押します。

私はそれを次のように持っています：

input { background-color:#fff; width:400px; ....... } 
input:hover { opacity:0.9; filter:alpha(opacity=90); width:500px;} 
input:focus {  color:#ff6b4f; box-shadow: 0 0 8px #fff; width:500px;} 
input:visited {  color:#ff6b4f; box-shadow: 0 0 8px #fff; width:500px;}

これは動作しません。どうすればそれを正しく行うことができるかわかりません。

4

2 に答える 2

3

あなたの場合、JavaScriptを使用する必要があります。入力のイベントを処理blurし、それが空かどうかを確認できます。そうでない場合は、幅を 500px に変更するクラスを追加します。

ここで実際の（jQuery）例を見ることができます

また、:visited疑似クラスはリンクに対してのみ機能します。

于 2013-11-20T22:06:26.173 に答える
0

この:visited属性はリンクにのみ適用されるため、代わりに Javascript を使用する必要があります。

CSS:
input {
    width:200px;
    border:1px solid #ccc;
    background-color:#eee;
    padding:0.25em 0.5em;
}
input:hover, input:focus, input.visited {
    width:300px;
}

HTML:
<form>
    <input name="x" onchange="this.className=(this.value=='')?'':'visited';" />
</form>

JSFiddle: http://jsfiddle.net/e77CG/

于 2013-11-20T22:10:00.733 に答える