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）是动态的是否相关？我在对话框中有一张表。感谢您的所有投入。

EDIT2

将代码简化为：

$('#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）。

EDIT3

好的，放弃了。所有替代（和更好）样式表版本都在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以及更优雅的解决方案，它使用类并解决设置初始边界的问题，然后立即使其稳定。

Updated Fiddle

Answer 2

   $('#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 #6060b0'
      });
   });

这也为你做了一些代码清理工作！尽量不要使用如此多的CSS功能，因为在没有理由的情况下，你只需要“重新浸入”！

你的＃dialog-date-picker也是由jQuery创建的，如果需要，你需要将这个函数嵌套在创建该td的函数中。

Answer 3

我认为dialog-date-picker已创建dynamically，因此最好将on用于事件mouseover和mouseout。

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

    }
);

Answer 4

您应该最好更改CSS和JS，并在悬停时向TD添加一个类，并在CSS中定义它。这减少了JS并保留了它们所属的东西：

http://jsfiddle.net/bDBWE/3/

$('#dialog-date-picker td').hover(function () {
    $(this).addClass('hover');
}, function() { 
    $(this).removeClass('hover');
});

Answer 5

jquery css()使用内联样式集来设置属性。它使用的API不允许在字符串中使用!important。

另请参阅https://bugs.webkit.org/show_bug.cgi?id=73941有关此问题的WebKit错误;该错误（它们最近才修复）的存在使您的脚本能够在Chrome和Safari中运行。

Firefox没有设置JavaScript的CSS样式？

修改

EDIT2

EDIT3

5 个答案: