关于jquery,移动到content上时会被隐藏？

Question

移动到head上会显示content，但移动到content上要求不消失，但实际却会消失。

问题要求：我的要求：

在不改变html结构和内容的情况下，只改变js，使移动到head上面时显示content，快速（1s内）移动到content上时，content并不消失。

各位大神，帮帮忙，一起学习学习啊！谢谢了！

代码： http://runjs.cn/code/2ba20i6p
演示: http://runjs.cn/detail/2ba20i6p

Answer 1

设个延时即可

var x=true;
$(function(){
  var timer = null;
  var hideContent=function(){
    timer = setTimeout(function(){
      $(".content").hide();
    });
  }
  $(".head").bind({
    'mouseover':function(ev){
      clearTimeout(timer);
      $(".content").show();
    },
    'mouseleave':function(eve){
       hideContent();
    }
  })
  $(".content").bind({
    'mouseover': function() {
      clearTimeout(timer);
    },
    'mouseleave': function() {
      hideContent();
    }
  })
})

Answer 2

给content加个鼠标移入移出事件

var x=true;
$(function(){

  var foo=function(){
    setTimeout(function(){
      $(".content").hide();
    },1000);
  }
  $(".head").bind({
    'mouseover':function(ev){
      $(".content").show();
    },
    'mouseleave':function(eve){
        $(".content").hide();
    }

  })
        $(".content").bind({
    'mouseover':function(ev){
      $(".content").show();
    },
    'mouseleave':function(eve){
        $(".content").hide();
    }

  })


})

Answer 3

一：将鼠标移入和移除事件分开写。

二：将content元素作为head的子元素（正确的嵌套标签元素），就解决了。

Answer 4

类似的这种移动不隐藏不应该设置1s内这种要求吧，用户体验不好，应该是只要下面content出现了移动到content是不消失的。
建议$(".head").bind改为$("#panel").bind即可

Answer 5

$('.head').bind({
    'mounseover': function() {
        $('.content').show()
    }
})

$('#panel').bind({
    'mouseleave': function() {
        $('.content').hide()
    }
})