Firefox не устанавливает стиль CSS из JavaScript?

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 показывает, что код выполняется, но ничего не происходит. Есть идеи, почему это должно быть? Спасибо.

EDIT

Люди - я понимаю, что это не элегантно, и я должен использовать 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'
        });
    }
);

Пример скрипта

РЕДАКТИРОВАТЬ

Вот дополнительная скрипка спасибодля PPvG и ptriek с гораздо более элегантным решением, которое использует классы и решает вопрос об установлении исходной границы, а затем немедленно делает ее сплошной.

Обновлено Fiddle

Answer 2

jquery css() использует встроенные наборы стилей для установки свойства. Используемый API не допускает !important в строке.

См. Также https://bugs.webkit.org/show_bug.cgi?id=73941 об ошибке WebKit по этому вопросу; наличие этой ошибки (которую они исправили только недавно) позволило вашему сценарию работать в Chrome и Safari.

Answer 3

Вы должны предпочтительно изменить и свой CSS и JS и добавить класс к TD при наведении курсора, и определить это в своем CSS. Это уменьшает JS и сохраняет вещи там, где они принадлежат:

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

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

Answer 4

я думаю, идентификатор 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 5

   $('#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-функций, сколько просто «переверните», когда для этого тоже нет причин!

Также ваш jQuery создает # dialog-date-picker, если вам нужно вложить эту функцию в функцию, которая создает этот тд.