如何恢复"默认"按钮样式

Question

我有一个保存按钮,当用户将鼠标悬停在它上面时,我会改变一些样式 - 例如:

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

当鼠标离开按钮时,我想恢复原始:

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

但是,不考虑默认按钮背景颜色是否为#EEE,当此代码执行时按钮失去其圆形外观,并具有方角.

是否有可能做到这一点？

Answer 1

我建议不要直接设置属性,而是设置一个类/类:

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

同

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

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

如果由于某种原因您不想这样做,而不是将特性设置为特定值,而是设置为空字符串.那应该"删除"该属性:

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