logo标签列表

Jquery：当另一个元素获得焦点时，如何设置隐藏元素显示？

jquerycssformsvisibility
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来做到这一点的方法，我也很高兴。
谢谢！
当您的文本框处于焦点状态时，您希望所有内容都显示吗？ - TStamper
3个回答
9

为您更新了关于失去焦点事件的内容

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

  });
谢谢，这几乎是我需要的！但是每个字段都有自己的说明，在li元素中分组。使用此脚本会在选择#message时将它们全部聚焦。有没有办法使它更通用，以便在每个li处于焦点或悬停状态时，该li内部的说明可见？此脚本还消除了我的悬停可见性。再次感谢您的帮助！ - John Stephens
当它们不再处于焦点状态时，将它们隐藏如何？ - John Stephens
对于这个问题，你可以将每个指令标识为唯一的名称，例如使用独特的类名，并按照相同的标准进行操作。至于第二个注释，blur事件就是实现这个功能的。 - TStamper
太棒了。我唯一遇到的问题是使用.hide使得指令链接无法点击——一旦你点击字段外面，即使是链接，它就会失去焦点并消失。我使用.fadeOut(1000)代替hide，链接又可以点击了。感谢您的帮助！ - John Stephens
1

使用焦点事件。

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

谢谢 - 看起来这就是我需要的，但我的JavaScript能力仅限于Padawan级别。我对XHTML和CSS有很好的掌握，但JavaScript对我来说就像魔法一样。 - John Stephens
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接