如何解决导航中的闪烁问题

Question

我在导航中有5个项目。每个项目都包含一个带文本，图标和链接的div（来自repeater1）以及一个背景图像，该图像是从导航上方的repeater2渲染的。我需要查看所有5个菜单项和一个背景图像。每隔10秒，状态就会更改（已添加活动类），并且以下条目显示为活动，并带有相应的背景。将鼠标悬停在之后，突出显示所选项目和背景。轮播有效，但悬停无效（闪烁）。

function subnavigationSlider() {
        let i = 0, j = 0, slidingTime = 10000, subnavigationItem, index;
        setInterval(function () {
            $(".subnavigation-image-wrapper.active, .subnavigation.active").removeClass("active");
            $(".subnavigation-image-wrapper:eq(" + i + ")").addClass("active");
            i++;
            if (i >= $(".subnavigation-image-wrapper").length) {
                i = 0;
            }
            $(".subnavigation:eq(" + j + ")").addClass("active");
            j++;
            if (j >= $(".subnavigation").length) {
                j = 0;
            }
        }, slidingTime);

        subnavigationitem = $(".helper");
        subnavigationimageitem = $(".subnavigation-image-wrapper");
        subnavigationitem.hover(function () {
            index = $(this).index();
            $(this).find(".subnavigation").addClass("active");
            $(".subnavigation-image-wrapper:eq(" + index + ")").addClass("active");
        }, function () {
            index = $(this).index();
            $(this).find(".subnavigation").removeClass("active");
            $(".subnavigation-image-wrapper:eq(" + index + ")").removeClass("active");
        });
    }
    subnavigationSlider();

.subnavigation-image-wrapper {
     
    .filledImg {
       display: none;
       height: 0;
    }

    &.active {

        .filledImg {
            display: block;
            height: 800px;
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="subnavigation-image-wrapper active">
    <div class="filledImg" style="background-image:url(bg1.jpg);"></div>
</div>
 <div class="subnavigation-image-wrapper">
    <div class="filledImg" style="background-image:url(bg2.jpg);"></div>
</div>
 <div class="subnavigation-image-wrapper">
    <div class="filledImg" style="background-image:url(bg3.jpg);"></div>
</div>
 <div class="subnavigation-image-wrapper">
    <div class="filledImg" style="background-image:url(bg4.jpg);"></div>
</div>
 <div class="subnavigation-image-wrapper">
    <div class="filledImg" style="background-image:url(bg5.jpg);"></div>
</div>

<div class="row">
  <div class="col-xs-15 col-md-15 helper">      
      <a class="vertical-align" href="link1">
            <div class="subnavigation">  
             <img src="img1.jpg">
             <h2>Text 1</h2>
          </div>
       </a>
  </div>
  <div class="col-xs-15 col-md-15 helper">      
    <a class="vertical-align" href="link2">
          <div class="subnavigation">  
           <img src="img2.jpg">
           <h2>Text 2</h2>
        </div>
     </a>
  </div>
  <div class="col-xs-15 col-md-15 helper">      
      <a class="vertical-align" href="link3">
            <div class="subnavigation">  
             <img src="img3.jpg">
             <h2>Text 3</h2>
          </div>
       </a>
  </div>
  <div class="col-xs-15 col-md-15 helper">      
      <a class="vertical-align" href="link4">
            <div class="subnavigation">  
             <img src="img4.jpg">
             <h2>Text 4</h2>
          </div>
       </a>
  </div>
  <div class="col-xs-15 col-md-15 helper">      
      <a class="vertical-align" href="link5">
            <div class="subnavigation">  
              <img src="img5.jpg">
              <h2>Text 5</h2>
          </div>
       </a>
  </div>
</div>