Question

I have a div:hover script set up http://jsfiddle.net/4wb5P/6/ (with the help of from StackOverflow member bfrohs, thank you! ), but I’d like to have the hover states start on page load and cycle through all the product hover states (through jquery, I’d assume, or something that plays nice between browsers). So I’ve been trying to get the cycle state to go like this:

1. Onload: starts with default “Hover to learn more” state
2. After 2 secs, cycle to ‘product 1 hover state’ and stays for 2-3 secs
3. Cycles to ‘product 2 hover state’ and stays for 2-3 secs
4. Cycles to ‘product 3 hover state’ and stays for 2-3 secs
5. Then starts back at product 1 and goes through all the products indefinitely.

If a user was to rollover any of the hover states it will stop cycle and stay focused on that hover (as long as the pointer stays on that tile). Once the user moves the pointer away, the cycle will restart from step 1.

I’d assume some Jquery would be in use, but that is where it gets me. Any help would be appreciated or any pointers to where to start with plugins, etc. would be greatly appreciated. See my current code below:
http://jsfiddle.net/4wb5P/6/

Answer 1

see my example fiddle: 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');
    });

});

I’ve inserted some new CSS rules everywhere you use :hover pseudoclass. This cycle runs forever until a mouseenter event occurs.

if you want an initial delay just wrap the code like so

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);
});