Javascript css中梯度的动态着色

我有一个包含一些Div元素的cshtml页面。这些div元素使用样式类中指定的渐变着色。我还添加了一个hover类，该类使div颜色稍微变浅，实际上模拟了按钮的效果以及悬停在按钮上的效果。div最终用于包含从MVC控制器接收的文本

我想做的是在jquery中用某种方式动态更改一组div的着色。我会将集合指定为红色（#FF0000），但是集合中的其他div应该变亮。类似于W3颜色选择器的“阴影”块

下面是我或多或少需要做的事情

您会注意到，我有两个css类定义颜色渐变，“red1”和“red2”。如果我在3组中有6个div，这意味着我需要构建18个不同的颜色类和它们各自的悬停方法

理想情况下，我希望每个集合有一个颜色类和一个悬停方法类。然后jquery将采用颜色并动态更改每个元素的“red”类的渐变颜色，以获得与我的示例中相同的效果

我也尝试过类似的方法：

var list = $("div.col").find(".get");

var step = 100;

list.each(function(i, e) {
   var shade = i * step;
   $(this).css("background-color", "rgb(255, " + shade + "," + shade + ")");
});

这确实改变了阴影，但是有6个元素，它有点太轻或者没有足够的区分不同的阴影。这也不能解决我的梯度问题

---

同样的原则也适用于按钮或任何其他元素的着色。也许有一个jquery可以同时解决所有这些问题，但我不知道。任何帮助都将不胜感激。

我试一试，这是

我假设你只会对“红色”（#ff0000）色调和从红色到浅红色的光谱这样做。上面的fiddle使用的是webkit语法，您可以根据需要修改代码

var base= 0;
var others=0;
var otherbase = 100;
var step= 15;
list.each(function(i, e) {
   $(this).css("background", "linear-gradient(to bottom, rgb("+ base +","+others+","+others+") 0%,#FF0000 100%) ");

    if(base<60)
        base=base+30;
    else if(base<200)
        base= base + 15;
    else{
     base= base + 25;
        others=otherbase + step;

        otherbase=others;
    }
});

---

顺便说一句，这需要jQuery。

我尝试了您想要的，请参见“小提琴”和屏幕截图：

在这里，我用计算机查询颜色的变化。所以我使用了下面的算法来实现这个结果，JS代码是：

var list=$（“div.col”）.find（.get”）

---

谢谢你的回复Nikhil。我把你的答案和@KiiroSora09的一句话结合起来了。查看更新的小提琴，了解我在寻找什么。我可以用这个来解决我问题的第一部分。但是它不能解决悬停在div上的第二部分。现在您将注意到，如果悬停在不同的div上，将不再有动画。现在如何添加hover函数？您需要使用jquery的.hover（）函数。同样，内部逻辑必须是需要解决的问题。如果你想看语法，请编辑答案。哦，当然可以！我没想过。谢谢Nikhil！感谢KiiroSora09的回复。你的小提琴没有让我看到效果，但我把你的一句话和@Nikhil的结合起来了。您可以在此处看到更新的小提琴：。但正如我在问题中提到的，我需要对悬停类/方法使用相同类型的效果。因此，当我将鼠标悬停在div上时，我需要它更轻一些，以复制按钮的效果。@Bester我更新了我的答案，尽管可能已经太晚了。哇，这太完美了，正是我需要的！谢谢一个mil@KiiroSora09

.get:hover:before {
    content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
}

var base= 0;
var others=0;
var otherbase = 100;
var step= 15;
list.each(function(i, e) {
   $(this).css("background-color", "rgb("+ base +","+others+","+others+")");
    if(base<60)
        base=base+30;
    else if(base<200)
        base= base + 15;
    else{
     base= base + 25;
        others=otherbase + step;

        otherbase=others;
    }
});

<div class="col">
    <div class="get mydiv1"></div>
    <div class="get mydiv2"></div>
    <div class="get mydiv3"></div>
    <div class="get mydiv4"></div>
    <div class="get mydiv5"></div>
    <div class="get mydiv6"></div>
    <div class="get mydiv7"></div>
    <div class="get mydiv8"></div>
    <div class="get mydiv9"></div>
    <div class="get mydiv10"></div>
    <div class="get mydiv11"></div>
    <div class="get mydiv12"></div>
    <div class="get mydiv13"></div>
    <div class="get mydiv14"></div>
    <div class="get mydiv15"></div>
    <div class="get mydiv16"></div>
    <div class="get mydiv17"></div>
    <div class="get mydiv18"></div>
</div>

(".get").hover(function(){
//  change background here
});