关于两个div的显示与掩藏

Question

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

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

<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 style = "">
          <li><>
          <li><>
          <li><>
      </ul>
</div>
  
  <script>
      $(".btn-slide-hover").hover(function(){
           
           $(".btn-slide-right").show(500);
           $(this).css("display","none");
      })
          $(".btn-slide-right").mouseout(function(){
          $(".btn-slide-hover").show(500);
          $(this).css("display","none");
      })
  </script>

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就好了（虽然我也是新手，但我同事要是像你那样写代码，我会想掐死他）

Answer 2

因为你的定位方式 position:fixed ?