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
        });

  });