Jquery：当另一个元素处于焦点时，如何设置要显示的隐藏元素？

我试图在表单字段旁边显示上下文帮助，只有当这些字段处于焦点或悬停状态时，上下文帮助才可见。我尝试过仅仅使用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实现这一点，我也会很高兴

谢谢

为您更新了

使用

---

当元素通过定点设备或选项卡导航接收焦点时，焦点事件将触发。

我发现jQuery toggle（）是我希望使用的解决方案

---

当文本区域处于焦点位置时，您希望所有内容都显示出来吗？谢谢——这几乎就是我所需要的！但每个字段都有自己的指令，与之一起分组在一个li元素中。选择#message时，使用此脚本可以将所有内容集中起来。是否有一种方法使其更通用，以便当每个li处于焦点或悬停状态时，该li中的指令可见？这个脚本还消除了我的悬停可见性。再次感谢您的帮助！当它们不再处于焦点时隐藏它们如何？为此，您可以将每个指令标识为唯一的名称，在本例中为唯一的类名，并遵循相同的条件，对于第二条注释，blur事件就是这样做的。我遇到的唯一问题是，使用.hide使指令链接不可读取——只要你在字段外单击，即使是链接，它也会失去焦点并消失。我用了.fadeOut（1000）代替了hide，链接又可以点击了。谢谢你的帮助！谢谢——这看起来正是我需要的，但我的javascript能力还不到学徒水平。我对XHTML和CSS有着坚定的理解，但是javascript对我来说是一种魔力。

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

  });