javascript - Firefox 没有从 JavaScript 设置 css 样式？

Question

我需要响应悬停在表格单元格上的操作。这个 css 代码工作正常:

#dialog-date-picker td { 
  border-style: outset !important;
  border : 2px solid #606060;
  cursor: pointer;
  ...etc
}

#dialog-date-picker td:hover {
  border-style: inset !important;
  border : 2px solid #6060b0;
}

但是，我需要一个更复杂的悬停响应，我无法在 css 中获得，我已经开始如下:

$('#dialog-date-picker td').hover(function () {
      $(this).css('border-style', 'inset !important');
      $(this).css('border', '2px solid #6060b0');
   }, function() { 
      $(this).css('border-style', 'outset !important');
      $(this).css('border', '2px solid #606060');
   }
);

jQuery 等效项适用于 Chrome 和 Opera，但不适用于 FF。 Firebug 显示代码已执行，但没有任何反应。任何想法为什么会这样？谢谢。

编辑

伙计们——我知道这并不优雅，我应该使用 css 和 JS，并添加一个类，但这不是问题所在。我刚刚采用了一个有效的 css 解决方案，作为第一步，将它放在上面的 JS 中。那时我发现等效的 JS 可以在 Opera 和 Chrome 中使用，但不能在 FF 中使用。结合这两个 css 调用，并将“border-style”转换为“borderStyle”，没有任何区别；它在 FF 中仍然不起作用。对话框(jQuery UI)是动态的是否相关？我在对话框中有一张 table 。感谢所有的输入。

编辑2

将代码简化为:

$('#dialog-date-picker td').hover(
   function() { $(this).css('border', '2px inset  #6060b0 !important'); },
   function() { $(this).css('border', '2px outset #606060 !important'); }
);

没有变化(适用于 IE8、Opera、Chrome、Safari，但不适用于 FF 3.6 或 8.0)。

编辑3

好吧，放弃吧。所有可供选择的(和更好的)样式表版本都可以在 FF 中工作，因此担心为什么这个特定代码在 FF 中不起作用似乎没有意义......

Answer 1

问题是因为第二个 css() 调用覆盖了第一个。试试这个:

$('#dialog-date-picker td').hover(
    function () {
        $(this).css({
            'border-style': 'inset !important',
            'border': '2px solid #6060b0'
        });
    }, 
    function() { 
        $(this).css({
            'border-style': 'outset !important',
            'border': '2px solid #606060'
        });
    }
);

Example fiddle

编辑

感谢 PPvG 和 ptriek，这里有一个额外的 fiddle ，它有一个更优雅的解决方案，它使用类并解决了设置起始边界的问题，然后立即使其成为实体。

Updated Fiddle