Question

I need to respond to a hover over a table cell. This css code works fine:

#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;
}

However, I need a more complex hover response that I can’t get in css, and I’ve started as follows:

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

The jQuery equivalent works in Chrome and Opera, but not FF. Firebug shows that the code is executed, but nothing happens. Any ideas why this should be? Thanks.

EDIT

Folks – I understand that this isn’t elegant, and I should be using css and JS, and adding a class, but that’s not the issue. I just took a working css solution and, as a first step, just put it in the JS above. At that point I found out that the JS equivalent worked in Opera and Chrome, but not FF. Combining the two css calls, and converting ‘border-style’ to ‘borderStyle’, didn’t make a difference; it still doesn’t work in FF.
Is it relevant that the dialog (jQuery UI) is dynamic? I’ve got a table within the dialog. Thanks for all the input.

EDIT2

Simplified the code to:

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

with no change (works in IE8, Opera, Chrome, Safari, but not FF 3.6 or 8.0).

EDIT3

Ok, given up on this. All the alternative (and better) stylesheet versions work in FF, so it seems a bit pointless worrying about why this particular code doesn’t work in FF…

Answer 1

The problem is because the second css() call is overwriting the first. Try this:

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

EDIT

Here’s an extra fiddle thanks to PPvG and ptriek with a much more elegant solution which uses classes and solves the issue of setting an outset border, then immediately making it solid.

Updated Fiddle