解决同层hover事件重叠闪烁问题

完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery.min.js"></script>
  <style>
    .smallbox{
      width:20px;
      height:20px;
      text-align: center;
      background:#333;
      /* position:absolute; */
      /* left:25px; */
      /* top:25px; */
      margin:5px;
      display: none;
    }
    .bigbox{
      width:150px;
      height:150px;
      background:#000000;
      margin: 10px;
      opacity: .1;
    }
    .pop{
      width: 150px;
      height: 150px;
      background: red;
      position: absolute;
      right: 0px;
      top: 0px;
      display: none;
    }
    .active{
      display: block;
    }
    .smallbox span{
      display: block;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="pop"></div>
  <div class="bigbox" key='A'></div>
  <div class="bigbox" key='B'></div>
  <div class="bigbox" key='C'></div>
  <div class="smallbox" key="1" style="position: absolute;left: 25px; top: 25px;"><span></span></div>
  <div class="smallbox" key="2" style="position: absolute;left: 50px; top: 40px;"><span></span></div>
  <div class="smallbox" key="3" style="position: absolute;left: 80px; top: 220px;"><span></span></div>
  <div class="smallbox" key="4" style="position: absolute;left: 120px; top: 180px;"><span></span></div>
  <div class="smallbox" key="5" style="position: absolute;left: 80px; top: 80px;"><span></span></div>
  <div class="smallbox" key="6" style="position: absolute;left: 120px; top: 350px;"><span></span></div>
  <div class="smallbox" key="7" style="position: absolute;left: 80px; top: 370px;"><span></span></div>

    <script>
          $(document).ready(
        
                  function(){
                      const arceObj={A:['5','1','2'],B:['3','4'],C:['6','7']}
                      let arceDom={}
                      // 当前所在热区
                      let arceKey=''
                      $(".bigbox").mouseover(
                              function(e){
                                  // 判断是哪个热区
                                  arceKey=$(e.target).attr('key')
                                  arceDom=e.target
                                  const arr =$('.smallbox')
                                  //console.log(arr)
                                  // 遍历这个数组  找出该热区下应该显示的小热区
                                  arr.each(function(item){
                                  const key=$(arr[item]).attr('key')
                                        //console.log(key);
                                      // 找到之后将这些smallbox元素显示
                                      if($.inArray(key,arceObj[arceKey]) !=-1){//判断arceObj数组里是否存在key
                                         $(arr[item]).show()
                                      }
                                  });
                                  $(this).css("opacity","1")
                              }
                      );

                      $(".smallbox").mouseover(
                              function(e){
                                  $(arceDom).css("opacity","1")
                                  // const arce=$(e.target).attr('key')
                                  // console.log(arce)
                                  // 当前元素的所有兄弟元素  可修改样式
                                  // $(e.target).siblings()
                                  const arr =$('.smallbox')
                                  // 遍历这个数组  找出该热区下应该显示的小热区
                                  arr.each(function(item){
                                      const key=$(arr[item]).attr('key')
                                      // 找到之后将这些smallbox元素显示
                                      if(arceObj[arceKey].indexOf(key)!=-1){
                                         $(arr[item]).show()
                                      }
                                  });
                             }
                      );
      
　　　　　　　　　　　　　/*
                      // 反向找到当前小热区所在的大热区 key为小热区的key
                      function getArcekey(key){
                        for(var akey in arceObj){
                          for(var i=0;i<arceObj[akey].length;i++){
                            // 如果找到相同的key返回大热区的key
                            if(arceObj[akey][i]==key){
                              return akey
                            }
                          }
                        }
                      }
　　　　　　　　　　　　*/


                      $(".bigbox").mouseout(
                              function(e){
                                  $(".smallbox").hide();
                                  $(this).css("opacity",".1")
                              }
                      );                 
                    
                    $(".smallbox span").hover(function(){
                            $(".pop").addClass("active")

                    },function(){
                            $(".pop").removeClass("active")
                    });



                  }
          );
      
      </script>
</body>
</html>
效果图：