Javascript 如何在鼠标悬停Jquery div滑块并在鼠标悬停时重新启动它

晚上好,， 我在这里准备了JSFIDLE演示

这是html：

<ul>
<li><a href="#" class="stop" id="dev" >a1</a></li>
<li><a href="#" class="stop" id="facebook" > a2</a></li>
<li><a href="#" class="stop" id="seo">a3</a></li>
<li><a href="#" class="stop" id="support">a4</a></li></ul>
<div id="serviceimg" class="serviceimg">
<div class="hide" name="dev" style="background:red;color:#fff;">a1</div>
<div class="hide" name="facebook" style="background:red;color:#fff;">a2</div>
<div class="hide" name="seo" style="background:red;color:#fff;">a3</div>
<div class="hide" name="support" style="background:red;color:#fff;">a4</div>
</div>

a1
a2
a3
a4

这是一个工作的jquery div滑块，但我需要将其暂停在a href鼠标上，并显示与此a关联的特定div。 在鼠标移出时，它必须继续进行div滑动，但在鼠标移出时，我得到了几秒钟的暂停，没有显示div。 如何启动div滑出鼠标

---

谢谢你的前卫

以下是更新的JS代码：

$('.serviceimg div').hide(); // hide all slides
    $('.serviceimg div:first-child').show(); // show first slide

    var prop;



    prop = setInterval(function () {
        $('.serviceimg div:first-child').hide()
            .next('div').show()
            .end().appendTo('.serviceimg');
    }, 3000);

    $('div').hover(function () {

        clearInterval(prop);

    }, function () {
        console.log('out');
        prop = setInterval(function () {
            $('.serviceimg div:first-child').hide()
                .next('div').show()
                .end().appendTo('.serviceimg');
        }, 3000);
        return false;
    });

SetInterval可能非常“危险”，因为它在您悬停时会堆叠。我使用了

returnfalse

来防止这种情况

---

.hover

功能最适合您的情况。您可以阅读更多有关它的信息

谢谢您的帮助。你的小提琴和我的不一样。我仍然可以看到鼠标移出触发后的1-2秒延迟。。这不应该是。。我在某处读到jquery setinterval（）必须暂停，但没有暂停；我不明白怎么做。。不要在你的小提琴中看到这个问题的解决方案，对吗？哦，我现在明白了：你想要这样的东西吗：没有人，这不是可以通过css解决的问题。我看不出你们两人之间有什么区别。。我的意思是你没有添加任何js脚本，对吗？我仍然可以看到一开始的延迟给我一些建议，我会看看我能做什么，我更新了我的解决方案。对不起，误会你了！现在，每次你在div上悬停，它都会冻结。当您悬停在外时，它将继续。我希望这对你有用！