把颜色放在div背景之上？ （也就是改变div的颜色而不改变'background-color'值）

Question

如标题所述;是否可以将颜色“置于”div的背景之上？我需要做的是改变div的显示颜色而不改变'background-color'值。

保持背景颜色的原因是因为我用它来比较点击的div：

var pick1 = false;
var pick2 = false;
var id1;
var id2;

$('.card').click(function(){

    if(pick1) {
        pick2 = $(this).css('background-color');
        id2 = $(this).attr('id');
        if(pick1 == pick2 && id1!=id2) alert('Correct');
        else alert('Incorrect');

        pick1 = false;
        pick2 = false;
    } else {
        pick1 = $(this).css('background-color');
        id1 = $(this).attr('id');   
    }
});

目标是隐藏div，例如灰色，直到点击它们为止：http://jsfiddle.net/94jerdaw/WJQkA/4/

修改

单击div时如何删除灰色？检查：http://jsfiddle.net/94jerdaw/29TCZ/3/

Answer 1

首先，您无法更改div的background-color，而无需更改其CSS background-color属性。你怎么样？

猜测你想要的是保持最后的背景颜色（对于某些动作或将其交换回来），然后将其保存在一些隐藏的输入变量中。

然后，您可以使用它来显示您想要的任何地方。

此外，如果你想抓住background-color属性并在div上显示as a text，你可以很容易地做到这一点。

var color = $('#selector').css('backgroundColor');

，但会返回RGB值。如果你想要十六进制，

使用这个方便的方法：

var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

取自here

更新

目前您的divs是这样的：

<div id="a1" class="card"></div>
<div id="a2" class="card"></div>
<div id="a3" class="card"></div>
..
..

并且因为您想为每个div分配一个秘密颜色 在你的while循环中通过javascript更新它们，使它们像这样：

 <div id="a1" class="card" data-color-index="1"></div>
 <div id="a2" class="card" data-color-index="2"></div>
 <div id="a3" class="card" data-color-index="3"></div>

现在，当您点击特定div时，抓住其索引并从您的colors数组中选择该项。既然，你是splicing原始数组，我必须复制它，以后再使用它。

你可以通过jquery抓取任何元素的属性data-color-index，如下所示：

   $('#selector').data('color-index');

请参阅此fiddle。它做你想做的事

Answer 2

不确定我是否理解你的目的......但是会在下班后使用：

.card {
    position: relative;
}
.card:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: black;
}
.card:hover:after {
    display: none;
}

示例：http://jsfiddle.net/29TCZ/

您可以替换：使用类悬停并根据需要切换它。

Answer 3

正如Manish所说，你不能在不改变CSS属性的情况下改变div的外观 - 但是有几种hacky方法可以做同样的事情。一个示例是在每个覆盖整个区域的彩色方块中创建子div，然后将该div的颜色设置为灰色。然后，您可以使用CSS显示属性来显示和隐藏叠加div。

但是，我建议您在JavaScript中使用颜色的副本，并在单击时仅参考与每个方块关联的值，而不是每次都检查DOM，因为这会使逻辑与外观分离：）