当前位置 : 主页 > 网页制作 > JQuery >

jquery – 如何恢复“默认”按钮样式

来源:互联网 收集:自由互联 发布时间:2021-06-15
我有一个保存按钮,当用户将鼠标悬停在它上面时,我会改变一些样式 – 例如: $('.saveButton').mouseover(function() { $(this).css("background-color", "red"); $(this).parents('fieldset').css("border", "2px solid red
我有一个保存按钮,当用户将鼠标悬停在它上面时,我会改变一些样式 – 例如:

$('.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,当此代码执行时,按钮失去其圆形外观,并具有方角.

是否有可能做到这一点?

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

$('.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", "");
});
网友评论