悬停时clearinterval不起作用

Question

我遵循我为 clearinterval 得到的所有答案，它与其他人的工作方式完全相同。不知道我做错了什么。我只希望幻灯片在悬停到 div 时停止。我什至将 cursor: 指针放入 div，但似乎这没有帮助。

var myVar = window.setInterval(yanslider, 7000);

  

  function yanslider(){

    $('.slider-inner > div:first')

      .fadeOut(1000)

      .removeClass('active')

      .next()

      .fadeIn(1000)

      .addClass('active')

      .end()

      .appendTo('.slider-inner');

  }

  $( ".slider-inner" ).hover(function() {

      // onmouseover

      window.clearInterval(myVar);

      // onmouseout

      yanslider();

  });

.slider-inner{

    width:200px;

    height:200px;

    position:relative;

    overflow:hidden;

    border:#666 solid 1px;

}

.slider-inner > div{

    display:none;

    width:200px;

    height:200px;

}

.slider-inner .active{

    display:inline-block;

    cursor: pointer;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider-inner">

          <div id="item" class="active"><p>#1</p></div>

          <div id="item" ><p>#2</p></div>

          <div id="item" ><p>#3</p></div>

        </div>