JQuery: How to set a hidden element to display when another element is in focus?

Question

I am trying to display context help along with the fields of a form that is visible only when these fields are in focus or freeze. I tried using simple CSS, but the results seem very fragile and inconsistent.

Here is my 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;
}

In my markup, I assigned my form to some structure using an ordered list, grouping each field with instructions in the element 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>
        [...]

Instructions appear when you hover over a field, but not when the field is in focus - and if the mouse moves to select a link in context instructions, they disappear.

, , , .

, , jquery . ? CSS, .

!

Answer 1

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

  });   

Answer 2

.

, , .

Answer 3

jQuery toggle() , .

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