3

フォームフィールドの横にコンテキストヘルプを表示しようとしています。これは、これらのフィールドにフォーカスがあるか、カーソルを合わせた場合にのみ表示されます。単なるCSSを使用してみましたが、結果は非常に壊れやすく、一貫性がないようです。

これが私のCSSです：

form .instruct {
    position: absolute;
    right: -220px;
    top: 10px;
    visibility: hidden;
    width: 200px;
    z-index: 1000;
}
form li:focus .instruct, form li:hover .instruct {
    visibility: visible;
}

マークアップでは、順序付きリストを使用してフォームに構造を与え、各フィールドをli要素内の指示とともにグループ化しました。

<form>
    <ol>
        [...]
        <li>
                <label for="message">Message</label>
                <textarea id="message" name="message"></textarea>
                <div class="instruct">
                    <p>Instructional text and <a href="#">Formating help.</a></p>
                </div>
        </li>
        [...]

フィールドにカーソルを合わせると指示が表示されますが、フィールドにフォーカスがある場合は表示されません。マウスを動かしてコンテキスト指示のリンクを選択すると、指示は消えます。

各フィールドには独自の指示があり、適切なフィールドがフォーカスまたはホバー状態にあるときに各フィールドを表示する必要があります。

これはjqueryが生活を楽にするケースかもしれないと思いました。これを達成するための簡単な方法はありますか？生のCSSを使用してこれを行う信頼できる方法があれば、私もそれに満足しています。

ありがとう！

4

3 に答える 3

9

あなたのためのぼかしイベントで更新

   $(function()
   {
        $('.instruct').hide(); //hide 
        $('#message').focus(function(){  
            $('.instruct').show(); //show
        }).blur(function(){  
            $('.instruct').hide(); //hide again
        });

  });
于 2009-04-23T05:06:24.213 に答える
1

focus イベントを使用します。

focus イベントは、要素がポインティング デバイスまたはタブ ナビゲーションによってフォーカスを受け取ると発生します。

于 2009-04-23T05:08:53.040 に答える
0

jQuery toggle() が、使用したかった解決策であることがわかりました。

http://docs.jquery.com/Effects/toggle

于 2009-04-23T06:36:47.960 に答える