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

更新为 blur event为你

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

  });