表格单元格背景颜色变化问题答案

【问题标题】：table cell background color change problem表格单元格背景颜色变化问题
【发布时间】：2011-03-09 16:13:48
【问题描述】：

我正在处理另一个人的代码，当鼠标悬停在单元格上时，我尝试更改表格单元格的背景颜色，并在鼠标离开时更改回原始背景颜色。我使用以下代码：

var bgcolor=$(".cell-el").css("background-color")

$(".cell-el").hover(
       function(){
         $(this).css("background-color", "#3c3c36")}, //mouse enter, bg-color change
       function(){
         $(this).css("background-color", bgcolor) // mouse leave, bg-color change back
 })

一切正常，除了当鼠标第一次进入单元格时，单元格背景颜色没有更改为“#3c3c36”，但是当鼠标离开时首次进入单元格后再次进入单元格，单元格的背景颜色变为“#3c3c36”。

这是鼠标第一次进入时单元格颜色永远不会改变，之后一切正常。这个问题的原因可能是什么？

【问题讨论】：

这段代码本身看起来是正确的：jsbin.com/ecuro4/2。您可能需要在上面添加更多信息
悬停时更改 CSS 属性？使用 :hover 伪类可以省去很多麻烦。

标签： jquery jquery-ui jquery-selectors

【解决方案1】：

你可以用简单的css试试

.cell-el td:hover{
   background-color:#3c3c36;
}

【讨论】：

半途而废，我的意思是，当鼠标进入时，背景颜色发生了变化，但是，当鼠标离开时，背景颜色并没有变回原来的颜色。
+1。使用他们所使用的工具。顺便说一句：@Mellon，这适用于我的 jsfiddle :) jsfiddle.net/xtofl/dQFM4
对不起，它有效，我用这个 css 代码搞砸了旧代码。谢谢！

【解决方案2】：

我刚刚在 jsfiddle 中模拟了一些东西，您的代码可以正常工作：http://jsfiddle.net/2fadn/

其他地方可能有问题。

另外，我建议你用 CSS 而不是 JS 来获得这种效果。只需使用 :hover 伪类就足够了。

【讨论】：

【解决方案3】：

效果很好，请看演示：http://jsfiddle.net/qjnqm/

通常的问题是行：

var bgcolor=$(".cell-el").css("background-color")

不在ready 处理程序中。

$(function(){
   var bgcolor=$(".cell-el").css("background-color")
   ..// etc
});

【讨论】：