Jquery: Как мне установить скрытый элемент для отображения, когда другой элемент находится в фокусе?

Question

Я пытаюсь отобразить контекстную справку рядом с полями формы, которая видна только тогда, когда эти поля находятся в фокусе или над ними. Я пытался использовать простой 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, я тоже был бы доволен этим.

Спасибо!

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