鼠标悬停时使用jquery隐藏div答案

【问题标题】：with jquery hide div when mouseout鼠标悬停时使用jquery隐藏div
【发布时间】：2013-09-30 22:21:12
【问题描述】：

HTML

<div class="wrapper">
    <div class="menu" id="atl-block">Menu-1</div>
    <div class="menu" id="btl-block">Menu-2</div>
    <div class="menu" id="ctl-block">Menu-3</div>
    <div class="menu" id="dtl-block">Menu-4</div>

    <a href="javascript:void(0);" class="btn01">Click1</a>
    <a href="javascript:void(0);" class="btn02">Click2</a>
    <a href="javascript:void(0);" class="btn03">Click3</a>
    <a href="javascript:void(0);" class="btn04">Click4</a>    
</div>

CSS

.wrapper {
    position:relative;
}
.menu {
    width:500px;
    height:300px;
    background-color:#f00;
    position:absolute;
    top:50px;
    display:none;    
}

JQUERY

$('.wrapper').children('a').on('click',function(){
  $('.wrapper').children('div').hide().eq($(this).index()-4).fadeIn(400);
});

JSfiddle

当点击包装div中的任何a标签时，显示相关的div。但是当鼠标悬停在 div 上时，我无法隐藏 div。我该怎么做？

【问题讨论】：

鼠标移出 div 或鼠标移出 ?
鼠标移出 div @Anton
并不是一个完整的答案，只是想用你的代码尝试一些东西：jsfiddle.net/SPYez/5。我建议清理一下，如果可以的话，通过更常规地将点击对象与菜单链接，可以更有效地执行您正在执行的扫描次数。另外，使用带有javascript:void(0) 的锚标记也不是很优雅，其中跨度可能更适合，这意味着您不必担心任何preventDefault 检查？

标签： jquery html css hide mouseout

【解决方案1】：

试试这个

$('.menu').on('mouseout',function(){
$(this).hide();
});

DEMO

【讨论】：

谢谢@Anton 以及如何在单击任何空白字段时隐藏此 div？
空白字段？你的意思是除了和
之外的任何地方？
除
外的任何地方点击隐藏div如何？
非常感谢@Anton，但我有一个问题。监听文档的点击事件会导致性能损失？
我不知道：/对不起，但我认为这是最好的方法，否则$(':not(".menu,a")').on('click',function(){ $('.menu').hide(); });