How to restore the default button style

Question

I have a save button, and when the user changes above 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 question of whether the default background color of the button is #EEE, when this code executes the button, it loses its rounded appearance and has square corners.

Can this be done?

Answer 1

I would suggest not setting the properties directly, but instead setting the class / classes:

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

- , , specfic, . "" :

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

Answer 2

, css:

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

/ :

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

, .

---

- ( ) css javascript - .

Answer 3

CSS :hover . , javascript .

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

, CSS mouseover/mouseout, .

Soh Tanaka CSS :hover. ? CSS.

UPDATE
CSS . , . , .saveButton:hover CSS, JavaScript , , .

(Actaully , CSS, ...)

Answer 4

- CSS , , jQuery "addClass". , "removeClass".

Answer 5

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

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