Jquery：如何设置隐藏元素以在另一个元素处于焦点时显示？答案

【问题标题】：Jquery: How do I set a hidden element to display when another element is in focus?Jquery：如何设置隐藏元素以在另一个元素处于焦点时显示？
【发布时间】：2010-10-21 06:58:40
【问题描述】：

我正在尝试在表单字段旁边显示上下文帮助，这仅在这些字段处于焦点或悬停时可见。我尝试过仅使用 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 css forms visibility

【解决方案1】：

为您更新了blur event

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

  });

【讨论】：

谢谢——这几乎就是我需要的！但是每个字段都有自己的指令，并在一个 li 元素中分组。选择#message 时，使用此脚本会使它们全部成为焦点。有没有办法让它更通用，以便当每个 li 处于焦点或悬停状态时，li 的说明 within 是可见的？这个脚本也摆脱了我的悬停可见性。再次感谢您的帮助！
当它们不再是焦点时如何隐藏它们？
为此，您可以将每条指令识别为唯一名称，在本示例中，唯一的类名称并遵循相同的标准，第二条评论模糊事件会这样做
太棒了。我遇到的唯一问题是，使用 .hide 会使指令链接无法点击——只要您在字段外点击，即使是链接，它也会失去焦点并消失。我使用 .fadeOut(1000) 而不是 hide 并且链接再次可点击。感谢您的帮助！

【解决方案2】：

使用focus event。

当元素通过定点设备或标签导航获得焦点时，将触发焦点事件。

【讨论】：

谢谢——这看起来像我需要的，但我的 javascript 能力几乎没有达到 Padawan 的水平。我牢牢掌握 XHTML 和 CSS，但 javascript 对我来说很神奇。

【解决方案3】：

我发现 jQuery toggle() 是我希望使用的解决方案。

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

【讨论】：