关于两个div的显示与掩藏

Question

首先，两个div是兄弟关系，分别是div1和div2；我想当我鼠标移到div1时：div1掩藏，div2显示；当鼠标离开div2时：div1显示，div2掩藏；div2里面有一个<ul>。以下是我的布局,但是无法实现想要的效果，每次鼠标停在<li>的范围里就能实现效果，一旦移到每个li之间的间隙时，div2就掩藏了，但是还没离开div2的范围，请问这是为什么？希望各位路过大神解答。。

Answer 1

<style>

  .btn-slide-right li {width:200px;height:50px;border:1px solid   red;margin-top:10px;}

</style>

<div class = "btn-slide-hover" style = "position:fixed;top:300px; right:0; width:20px;height:200px;

background-color:#dcdfdf;border-right:none;"></div>

<div class = "btn-slide-right" style = "position:fixed;right:0; display:none; border:1px solid red;width:100px;height:200px;z-index:9999;top:300px;">

    <ul class = "ul">

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

<script>

    $(".btn-slide-hover").hover(function(){

        $(".btn-slide-right").show(500);

        $(this).hide();

    });

    $(".btn-slide-right").mouseleave(function(){

        $(".btn-slide-hover").show(500);

        $(this).hide();

    })

</script>

把mouseout换成mouseleave就好了（虽然我也是新手，但我同事要是像你那样写代码，我会想掐死他）