Положить цвет поверх фона div? (иначе измените цвет div без изменения значения «background-color»)

Question

Как указано в названии; Можно ли поместить цвет «поверх» фона div? Мне нужно изменить отображаемый цвет div без изменения значения «background-color».

Причина для сохранения цвета фона, потому что я использую его, чтобы сравнить кликали див:

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

Цель состоит в том, чтобы скрыть дивы с, например, серым цветом, пока они не щелкнули: http://jsfiddle.net/94jerdaw/WJQkA/4/

EDIT:

Как удалить серый цвет при нажатии на DIV? Check: http://jsfiddle.net/94jerdaw/29TCZ/3/

Answer 1

Не уверен, что я понимаю, что вы собираетесь ... но будет использовать: после работы?

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

Во-первых, вы не можете изменить div background-color, не изменяя свой CSS background-color. Как ты мог?

Угадайте, что вы хотите сохранить последний фоновый цвет (для какого-либо действия или для его замены), а затем сохраните его в некоторых скрытых входных переменных.

И затем вы можете использовать его для отображения в любом месте.

Кроме того, если вы хотите взять напрокат background-color и показать его as a text на div, вы можете сделать это очень легко.

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

Update,

В настоящее время ваш divs, как это:

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

и так вы хотите назначить секретный цвет каждому из этих div s обновить их через 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 вашим исходным массивом, мне пришлось сделать его копию, чтобы использовать его позже.

вы можете получить атрибут data-color-index любого элемента через JQuery, как это:

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

посмотреть fiddle. он делает то, что вы хотите сделать

Answer 3

Как сказал Маниш, вы не можете изменить внешний вид div без изменения свойства CSS, но есть несколько хакерских способов сделать то же самое.Одним из примеров является создание дочернего div в каждом из цветных квадратов, который охватывает всю область, а затем устанавливает цвет этого div в серый. Затем вы можете использовать свойство отображения CSS, чтобы отображать и скрывать оверлейные div.

Однако я бы рекомендовал иметь копию цветов в JavaScript и просто ссылаться на значение, связанное с каждым квадратом, когда он щелкнут, а не проверять DOM каждый раз, поскольку это сохраняет логику отдельно от внешнего вида :)