在模糊或鼠标移出时隐藏 div答案

【问题标题】：Hide div on blur or mouse out在模糊或鼠标移出时隐藏 div
【发布时间】：2013-02-04 20:43:17
【问题描述】：

在失去焦点或模糊后尝试隐藏 div。我有一个简单的表单，当通过触摸或点击（这是一个移动网站）关注该字段时，我为用户提供了一些指导。它可以正常工作，但我必须再次单击该字段才能使 div 再次隐藏。

HTML：

 <input type="text" id="usernameCL" name="usernameCL" placeholder="Create a Username" autocomplete="off" autocorrect="off" class="field_hints"/>
<div id="usernameCL" class="tooltip_static" style="display:none"> This be my field hint</div>

这是我的其他字段提示

使用 1.6.4 JQ 的 JQuery 函数：

$().ready(function () {
    $('.field_hints').bind('focus',
     function()
     {
       var field = this.id;
       var div = $('.tooltip_static[id='+field+']');

       if(div.css('display') == 'none')
       {
         div.show(function()
         {
           div.slideUp("fast");
         });
       }
      else
      {
        div.hide('blur');
      }
    });
  });

这是一个小提琴： http://jsfiddle.net/LapPA/

有谁知道如何让它在模糊或鼠标移出时隐藏？

【问题讨论】：

标签： jquery html hide show

【解决方案1】：

 $('#myformid').on('blur', '.field_hints',function(){
     $(this).next('.tooltip_static').hide();
 }); //replace #myformid with the id of your form

【讨论】：

【解决方案2】：

您需要绑定到blur 事件的单独处理程序。

例如，你可以this:

$().ready(function () {
  $('.field_hints').bind('focus',
    function()
    {
      var field = this.id;
      var div = $('.tooltip_static[id='+field+']');

      if(div.css('display') == 'none')
      {
        div.hide(function()
        {
          div.slideDown("fast");
        });
      }
    }).bind('blur', 
        function()
        {
            var field = this.id;
            var div = $('.tooltip_static[id='+field+']');
            div.hide();
        });
  });

【讨论】：

这实际上工作得很好，并且在表单上带有 iOS 下一步按钮。谢谢。

【解决方案3】：

您可以使用mouseleave 事件：http://jsfiddle.net/4VUvD/

$().ready(function () {
      $('.field_hints').bind('focus', function() {
          var field = this.id;
          var div = $('.tooltip_static[id='+field+']');
          div.slideDown("fast");
      }).bind('mouseleave', function(){
          $('.tooltip_static[id='+this.id+']').slideUp("fast");
      });
});

【讨论】：

效果很好。在 iOS 上使用“下一步”按钮存在一些问题，但假设我需要补偿制表符。

【解决方案4】：

首先，您有两个具有相同 ID usernameCL 的对象。这不好。

您要搜索的代码：

var func = function () {
    // We assume the id of the input tag to be #someid, and the tooltip div to be #someid_tooltip
    var id = $(this).attr('id');
    $('#' + id + '_tooltip').fadeOut();
};

$('#usernameCL').bind('blur', func);
$('#usernameCL').bind('mouseout', func);

可能是我弄错了一两个名字。

【讨论】：

是的，那是我的错。使用了错误的 ID。我会改变它。基本上，如果你看到这个 div 在我们的评论框下方是如何打开的，这就是我想要完成的。
实际上我也注意到了这一点，并且想知道为什么它在我重复使用 ID 后会起作用。我想我可以尝试改用一个类。
类应该用于分配相似/相同的_traits_ to multiple tags. Using them for identification is not a good idea (but it does work if you give care, for example with the other examples using $(this).next()`)。这就是 id 的用途。