Как я могу восстановить стиль кнопки «по умолчанию»

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, при выполнении этого кода кнопка теряет округленный вид и имеет квадратные углы.

Isможно ли это сделать?

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

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, используйте этот метод.

Вот живой пример Сох Танака из CSS :hover в действии.Эти всплывающие подсказки на панели?Чистый CSS.

ОБНОВЛЕНИЕ
В моем CSS есть недостаток, связанный с вашей моделью проблемы.Это вызовет зависание на наборе полей, даже если вы не наводите курсор на кнопку.Я бы использовал вторую строку, .saveButton:hover в CSS, и использовал бы JavaScript для наведения поля, используя класс, как указывали другие ответы.

(На самом деле I изменил бы моймодель проблемы, чтобы принять чистое решение CSS, но я отвлекся ...)

Answer 4

Да, вы можете установить класс для mouseEnter, который сделает цвет bg и цвет границы красным.

Чем вы можете использовать toggleClass для события, чтобы он переключал добавление и удаление вашего события.класс, всегда восстанавливая кнопку по умолчанию.

Answer 5

Лучше всего создать класс CSS для стилей, которые вы добавляете при наведении курсора, и добавить его с помощью jQuery, используя addClass.Затем вы можете просто удалить временный стиль, используя «removeClass».