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

正如标题中所述;是否有可能在div的背景上添加一个颜色？我需要做的是改变div的显示颜色而不改变'background-color'值。把颜色放在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/

来源

2013-03-23 Dave

您可以随时使用其他属性进行比较并使用颜色的主要功能：着色.. – scones 2013-03-23 19:19:05

不知道我是否明白你要去...但会使用：下班后？

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

您可以取代：一类hover和切换它的要求。

来源

2013-03-23 19:34:19

这将创造没有悬停的奇迹，谢谢！ – Dave 2013-03-23 19:38:14

如何在点击时删除灰色？ http://jsfiddle.net/94jerdaw/29TCZ/3/ – Dave 2013-03-23 20:30:00

你甚至看到我的答案？ – 2013-03-24 06:53:56

首先，您不能更改div的background-color，而不更改其CSS background-color属性。你怎么能？

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

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

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

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

，但它会返回你的RGB值。如果你想六角，

利用这个方便的方法：从here

更新采取

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

，

目前您divs是这样的：

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

和自你想为这些div分配一个秘密颜色现在

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

，当您从colors阵列你们的点击特定的div，抓住它的指数，然后选择项目：■ 通过JavaScript更新它们，你的while循环中，使他们这样。因为，你是splicing你的原始数组，我不得不复制它，稍后使用它。

你可以通过jQuery的抢任何元素的属性data-color-index这样的：

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

看到这个fiddle。它做你想做的事

来源

2013-03-23 19:15:18

因此，没有办法在背景颜色之上再添加一种颜色？有点像img简单地填充div，而不是替换背景颜色。 – Dave 2013-03-23 19:18:27

你是什么意思，'在背景色之上'？你想在你的div的顶部另一个颜色部分？ – 2013-03-23 19:19:50

非常多，一些隐藏真正的颜色与灰色填充的方式。 – Dave 2013-03-23 19:23:58

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

但是，我会建议在JavaScript中有一个颜色副本，并且只是在每次点击时引用与每个方块关联的值，而不是每次都检查DOM，因为这会使逻辑与外观保持分离:)

来源

2013-03-23 19:25:04

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

回答

相关问题

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