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

Question

As stated in the title; Is it possible to put a color "on top of" the div's background? What I need to do is change the displayed color of the div without changing 'background-color' value.

The reason for keeping background-color is because I'm using it to compare the clicked divs:

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

The goal is to conceal the divs with for example grey color until they are clicked: http://jsfiddle.net/94jerdaw/WJQkA/4/

EDIT:

How do I remove the grey when clicking a div? Check: http://jsfiddle.net/94jerdaw/29TCZ/3/

Answer 1

firstly, you cannot change div's background-color , without changing its CSS background-color property. How could you?

Guessing what you want is to maintain last background-color (for some action or to swap it back), then save it in some hidden input variables.

And then, you can use it to display anywhere you want.

Also, if you want to grab the background-color property and show it as a text on the div, you can do that very easily.

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

, but it will return you RGB value. if you want hex,

use this handy methods:

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

taken from here

Update,

currently your divs are like this:

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

and since you want to assign a secret color to each of these divs update them through javascript, inside your while loop, to make them like this:

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

now, you when you click on a particular div, grab its index and choose that item from the colors array of yours. since, you are splicing your original array, i had to make a copy of it, to use it later.

you can grab any element's attribute data-color-index through jquery like this:

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

see this fiddle . it does what you want to do

Answer 2

Not sure if I understand what you are going for... but would using :after work?

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

Example: http://jsfiddle.net/29TCZ/

You could replace :hover with a class and toggle it as required.

Answer 3

As Manish said, you cannot change the appearance of the div without changing the CSS property - but there are several hacky ways of doing the same thing. One example is to create a child div in each of the coloured squares that covers the entire area and then set the colour of that div to grey. You can then use the CSS display property to show and hide the overlay divs.

However, I would recommend having a copy of the colours in JavaScript and just referring to the value associated with each square when it is clicked instead of checking the DOM every time as this keeps the logic separate from the appearance :)