0

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

查询

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

JSfiddle

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

4

1 回答 1

1

尝试这个

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

演示

于 2013-09-25T10:59:11.517 回答