How can I restore the "default" button style

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?

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", "");
});

Yes, use a class and some css:

/* in style.css */
.over {
    border: 2px solid red;
}
.over .saveButton {
    background-color: red;
}

Then just add/remove this class to the parent fieldset:

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

Removing the class will revert the button and the field state they were before that.

As a good practice - it is better to keep the presentation (how things look) in css and use javascript to switch between them - it's much easier to manage that way.

This would be far better suited for CSS :hover pseudo-clas. And much faster than javascript too.

.fieldset-class:hover { border: 2px solid red;}
.saveButton:hover { background-color:red;}

Any time you only need to change CSS on mouseover/mouseout events, use this method.

Here is a live example from Soh Tanaka of CSS :hover in action. Those popup tooltips on the bar? Pure CSS.

UPDATE
There is a flaw in my CSS in relation to your problem model. This will cause the hover on the fieldset to fire even if you are not hovering on the button. I would use the second line, .saveButton:hover in CSS, and use JavaScript for the fieldset hover, using a class as the other answers have pointed out.

(Actaully I would change my problem model to accept a pure CSS solution, but I digress...)

Your best bed is to create a CSS class for the styles you are adding on the mouseover and add it with jQuery using "addClass". Then you can just remove your temporary style using "removeClass".

Yes, you can set up a class for the mouseEnter that make the bg color and border color in red.

Than you can use toggleClass for the event, so that it will toggle your event adding and removing the class, restoring always the default button.