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

  });

Answer 2

使用focus event。

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

Answer 3

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

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

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

3 个答案: