Question

I have a save button, and when the user mouses over it, I change some styles – for example:

$('.saveButton').mouseover(function() {
   $(this).css("background-color", "red");
   $(this).parents('fieldset').css("border", "2px solid red");
});

When the mouse leaves the button, I would like to restore the original:

$('.saveButton').mouseout(function() {
   $(this).css("background-color", "#EEE");
   $(this).parents('fieldset').css("border", "1px solid gray");
});

However, leaving aside the matter of whether or not the default button background color is #EEE, when this code executes the button loses its rounded look, and has square corners.

Is it possible to do this?

Answer 1

I would suggest not to set the properties directly, but set a class/classes instead:

$('.saveButton').mouseover(function() {
   $(this).addClass('highlight');
   $(this).parents('fieldset').addClass('highlight');
}).mouseout(function() {
   $(this).removeClass('highlight');
   $(this).parents('fieldset').removeClass('highlight');
});

With

.saveButton.highlight { /* Double class selector is broken in IE6 */
   background-color: red;
}

fieldset.highlight {
  border: 1px solid red;
}

If for some reason you don’t want to do that, instead of setting the properities to a specfic value, but to an empty string. That should “remove” that property:

$('.saveButton').mouseout(function() {
   $(this).css("background-color", "");
   $(this).parents('fieldset').css("border", "");
});