通过div:hovers加载Jquery循环？

Question

我有一个div:悬停脚本设置了http://jsfiddle.net/4wb5P/6/ (在StackOverflow成员bfrohs的帮助下，谢谢！)，但是我想让悬停状态从页面加载开始，循环到所有产品悬停状态(我假设是通过jquery，或者浏览器之间运行良好的东西)。所以我一直在努力让循环状态变成这样：

indefinitely.

1. Onload:从默认的"Hover学习更多“状态开始，在2秒后循环到”产品1悬停状态“，停留2-3秒
2. 循环到”产品2悬停状态“，停留2-3秒
3. 循环到”产品3悬停状态“，停留2-3秒

<代码>h 110，然后从产品1开始，并遍历所有产品的

1. 循环。

如果用户要滚动任何一个悬停状态，它将停止循环并将注意力集中在该悬停状态上(只要指针停留在该瓷砖上)。一旦用户将指针移开，循环将从步骤1重新启动。

我假设会有一些Jquery在使用，但这正是我使用Jquery的原因。任何帮助将不胜感激，或任何指针，从哪里开始插件，等等，将不胜感激。请参见下面的代码：http://jsfiddle.net/4wb5P/6/

Answer 1

看我的例子小提琴：http://jsfiddle.net/bAtCS/1/

$(function() {

    var hoverprod = $('.hover_product'), len = hoverprod.length, intv;
    (function iterativehover(i) {
        hoverprod.removeClass('hover').eq(i).addClass('hover');
        intv = setTimeout(function() {
            iterativehover((i === len - 1)? 0 : i + 1)
        }, 3000);
    }(0));

    hoverprod.on('mouseenter', function() {
       clearInterval(intv);
       hoverprod.removeClass('hover');
    });

});

我在您使用的任何地方都插入了一些新的CSS规则:悬停伪类。这个循环将永远运行，直到发生mouseenter事件。

如果您想要初始延迟，只需将代码包装如下

var rotateDivs = function() {
    var hoverprod = $('.hover_product'), len = hoverprod.length, intv;
    (function iterativehover(i) {
        hoverprod.removeClass('hover').eq(i).addClass('hover');
        intv = setTimeout(function() {
            iterativehover((i === len - 1)? 0 : i + 1)
        }, 3000);
    }(0));

    hoverprod.on('mouseenter', function() {
       clearInterval(intv);
       hoverprod.removeClass('hover');
    });
};


$(function() {
    setTimeout(rotateDivs, 3000);
});