0

这是Jsfiddle，它显示了我到目前为止所拥有的东西。我希望这样当用户将鼠标悬停在背景颜色为红色的 div 上时，setInterval 应该停止，以便鼠标悬停在其上的 div 应该保持红色，而所有其余的 div 保持默认颜色（白色）。

当鼠标移出 div 时，设置的间隔继续。

            function bgChange(){
            for(var count = 0; count < arr.length; count++){
                if(i == count) arr[count].css('background-color', "red");
                else arr[count].css("background-color", "skyblue");
            }
            i++;
            if( i === arr.length){i =0;} 
                var color = $(".boxes").each(function(){//part of the code i 
                                                // tried adding but doesnt't work
                    $(this).css("background-color")
                })
                console.log(color)
//check the background color to see if its red. Also if the mouse is over the 
//particular div it should clear the interval and when the mouse moves out of the
// the div it should start rotating colors down the row
            }

JSFIDDLE提前致谢。

4

2 回答 2

1

这个怎么样？我正在添加/删除一个 css 类，而不是直接设置背景颜色。然后在鼠标悬停时，如果设置了红色类，则停止间隔，在鼠标悬停时，再次启动间隔。setInterval 调用必须保存为变量，以便以后清除它。

$(document).ready(function () {
    var arr = [];
    var i = 0;
    $(".boxes").each(function () {
        arr.push($(this));
    });

    function bgChange() {
        for (var count = 0; count < arr.length; count++) {
            if (i == count) arr[count].addClass('red');
            else arr[count].removeClass('red');
        }
        i++;
        if (i == arr.length) i = 0;
    }
    var interval = setInterval(bgChange, 2000);

    $(".boxes").mouseover(function(){
        if($(this).hasClass('red')){
            clearInterval(interval);
        }
    });

    $(".boxes").mouseout(function(){
        if($(this).hasClass('red')){
            interval = setInterval(bgChange, 2000);
        }
    });

});
于 2013-09-15T21:32:38.840 回答
0

您需要保存该setInterval()方法返回的间隔 ID，并在需要时使用它清除间隔。请注意，一旦清除，就无法重新启动间隔，但由于您使用的是全局变量，您可以开始一个新的间隔，它将从中断的地方继续。

由于您没有使用类来添加红色背景，因此您需要检查颜色本身并返回红色作为rgb(255, 0, 0)您应该比较的颜色。如果您最终为背景颜色红色添加了一个类，您可以使用$(this).hasClass('className').

最后，您需要添加鼠标悬停方法，.boxes以便当鼠标悬停时，您可以检查颜色和停止间隔，并在鼠标悬停时开始新的间隔。

这里的例子。

var arr = [];
var i = 0;
var intervalID = -1;

$(document).ready(function () {
    $(".boxes").each(function () {
        arr.push($(this));
    });

    $(".boxes").hover(function () {
        if ($(this).css('background-color') == "rgb(255, 0, 0)") {
            clearInterval(intervalID);
            intervalID = -1;
        }
    },

    function () {
        if (intervalID == -1) {
            intervalID = setInterval(bgChange, 2000);
        }
    });

    function bgChange() {
        for (var count = 0; count < arr.length; count++) {
            if (i == count) {
                arr[count].css('background-color', 'red');
            } else {
                arr[count].css('background-color', 'white');
            }
        }
        i++;
        if (i == arr.length) i = 0;
    }
    intervalID = setInterval(bgChange, 2000);
});

[编辑-抱歉，我错过了看到您已经有一个红色课程-为红色课程更新了小提琴]

于 2013-09-15T21:34:03.213 回答