悬停时setInterval中的图像闪烁

这是一个图像滑块。当我将鼠标悬停在滑块上时，一切正常，播放/暂停按钮出现。当我将鼠标悬停在滑块显示区域之外时，播放和暂停按钮将消失。但是，当我将鼠标悬停在播放/暂停图像本身的区域上时，播放/暂停的图像会闪烁。

有没有办法停止闪烁？

当您将鼠标悬停在滑块上时，将显示播放和暂停图像。单击播放时，它将变为暂停，反之亦然。播放和暂停自动打开和关闭

代码段：

HTML

<section>
            <img src="img/arrow-left.png" alt="Previous" id="prev">
            <div id="outsideSlider">
                <img alt="play" src="img/play.png" id="play">
                <img alt="pause" src="img/pause.png" id="pause">
                <div id="slider">
                    <div class="slide">
                        <div class="sliderText">
                            <h2>Hark! Stay alert</h2>
                            <p>Some text</p>
                        </div>
                        <img src="img/slide1.jpg" alt="Slide 1">
                    </div>
                 </div>
   </section>

jQuery

setInterval(function(){
    playpause();
},1);
//function to switch between play button and pause button on click
function playpause(){
    if($('#pause').hasClass('activeButton'))
    {
        $('#slider,#play,#pause').click(function(){
            $('#pause').removeClass('activeButton');
            $('#play').addClass('activeButton');
            $('#pause').hide();
            $('#play').show();
            autoswitch=false;
        });
    }   
    //When play is clicked, activate pause button
else if($('#play').hasClass('activeButton'))
    {
        $('#slider,#play,#pause').click(function(){
            $('#play').removeClass('activeButton');
            $('#pause').addClass('activeButton');
            $('#play').hide();
            $('#pause').show();
            autoswitch=true;
        });
    }
}