3

我正在尝试在表单字段旁边显示上下文帮助，这仅在这些字段处于焦点或悬停时可见。我尝试过仅使用 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 的可靠方法来做到这一点，我也会很高兴。

谢谢！

4

3 回答 3

9

为您更新了模糊事件

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

  });
于 2009-04-23T05:06:24.213 回答
1

使用焦点事件。

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

于 2009-04-23T05:08:53.040 回答
0

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

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

于 2009-04-23T06:36:47.960 回答