Dynamic gradient shading in css

Question

I have a cshtml page with some div elements. These div elements are colored with a gradient, as indicated in the style classes. I also added a hover class that turns the div color a little lighter, actually simulating the effect of a button and hovering above it. Ultimately, divs are used to hold text received from the MVC.

What I would like to do is somehow in jquery, perhaps to dynamically change the shading of a set of divs. I will indicate that the set will be red (# FF0000), but the rest of the div in the set should then light up. Something similar to the W3 hue block http://www.w3schools.com/tags/ref_colorpicker.asp

Here is jsfiddle with what I more or less need to do.

https://jsfiddle.net/ezxkf3qL/1/

You will notice that I have 2 css classes that define color gradients, 'red1' and 'red2'. If I have 6 sections in 3 sets, this means that I need to build 18 different classes of colors and the corresponding methods for pointing them.

Ideally, I would like to have one color class and one hover method class for each set. Then jquery will take a color and dynamically change the gradient colors of the "red" class for each element to get the same effect as in my example.

I also tried something:

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

This changes the hue, but with 6 elements it becomes too light or does not distinguish between different shading. Also this does not solve my gradient problem.

. , jquery, , . .

Answer 1

, .

, "" (# ff0000) , -. 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;
    }
});

UPDATE:

fiddle, , .

, , , .get divs, . .get divs ( , ).

, div. , , , . CSS:

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

jQuery, .

Answer 2

, , . https://jsfiddle.net/ezxkf3qL/2/" :

, W3schools. : JS-:

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

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

HTML:

<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>

:

, R(RED) 0. , 200, G B, 100. , .

hove, jquery .hover() :

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