把顏色放在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'的值）