2

如标题所述；是否可以将颜色“放在”div的背景上？我需要做的是更改 div 的显示颜色而不更改“背景颜色”值。

保留背景颜色的原因是因为我用它来比较点击的 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/

4

3 回答 3

3

不知道我是否明白你的目的......但会使用 :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;
}

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

您可以将 :hover 替换为一个类并根据需要切换它。

于 2013-03-23T19:34:19.423 回答
1

首先，你不能改变 div 的background-color，而不改变它的 CSSbackground-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];
 }

取自这里

更新，

目前你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你的原始数组，我必须复制它，以便以后使用。

data-color-index您可以像这样通过 jquery获取任何元素的属性 ：

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

看到这个小提琴。它做你想做的事

于 2013-03-23T19:15:18.530 回答
0

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

但是，我建议在 JavaScript 中使用颜色的副本，并在单击每个正方形时仅引用与每个正方形关联的值，而不是每次都检查 DOM，因为这样可以使逻辑与外观分开:)

于 2013-03-23T19:25:04.757 回答