Question

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

我想做的是在jquery中某种方式可能动态地改变一组div的阴影。我将该设置指定为红色（＃FF0000），但该组中的其余div应该更浅。类似于W3颜色选择器＆＃39; Shades＆＃39;阻止http://www.w3schools.com/tags/ref_colorpicker.asp

这是一个jsfiddle，我或多或少需要做什么。

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

你会注意到我有两个定义颜色渐变的css类，＆＃39; red1＆＃39;和＆＃39; red2＆＃39;。如果我在3组中有6个div，则意味着我需要构建18种不同的颜色类及其各自的悬停方法。

理想情况下，我希望每个集合都有一个颜色类和一个悬停方法类。然后jquery会采用颜色并动态地改变红色＆＃39;为每个元素设置渐变颜色，以获得与我的示例相同类型的效果。

我也试过这样的事情：

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可以在我不知道的同时解决所有这些问题。任何帮助将不胜感激。

Answer 1

我尝试了你想要的东西，看到小提琴＆＃34; https://jsfiddle.net/ezxkf3qL/2/＆＃34;和截图：

enter image description here

在这里，我使用W3schools询问颜色变化。所以我使用以下算法来实现结果，JS代码是：

var list = $（＆＃34; div.col＆＃34;）。find（＆＃34; .get＆＃34;）;

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

Answer 2

我试了一下，这里是my fiddle。

我认为你会为红色＆＃39; （＃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;
    }
});

<强>更新

我修复了fiddle，您现在应该可以测试一下，对不起。

代码的作用是计算有多少.get个div，并应用从黑色到红色到白色的渐变光谱。阴影的方差取决于有多少.get个div（越少，差异越大）。

对于悬停，我认为你只想减轻悬停的div的阴影。所以我创建了一个只在悬停时出现并充当半透明白色叠加层的伪元素，请参阅下面的CSS代码：

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

顺便说一下，这需要jQuery。

css

2 个答案: