clear悬停时的间隔，如果元素具有特定的背景

clearInterval on hover AND if the element has a particular background

本文关键字：元素 背景 悬停 clear 如果      更新时间：2023-09-26

这是显示我到目前为止所拥有的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 提前感谢。

这个怎么样？我正在添加/删除 css 类，而不是直接设置背景颜色。然后在 mousover 上，如果设置了红色类，则停止间隔，并在鼠标退出时，再次启动间隔。必须将 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);
        }
    });
});

您需要保存 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);
});

[编辑 - 抱歉，我错过了看到你已经有一个红色类 - 更新了红色类的小提琴]

相关文章：