Мне было интересно, как я могу добавить 3-х государств к кнопке Submit. По состояниям я имею в виду, что кнопка меняет изображение при наведении курсора, нажимает и просто статично/нетронуто. Я бы предпочел, чтобы решение использовало чисто HTML & CSS, но Javascript тоже в порядке. Спасибо!3-States на кнопке отправки
Я считаю, что проще дать идентификаторы или классы таких вещей, чтобы сделать его проще. Вы можете сделать что-то подобное в jquery:
Предположим, что кнопка имеет идентификатор #derp.
$("#derp").click(function(){
this.toggleClass("pressed");
});
В основном это добавит или удалит класс «нажатие» из предмета в зависимости от его состояния. Просто добавьте css для .pressed, и вы готовы к работе.
#derp {...}
#derp:hover {...}
#derp:active {...}
#derp.pressed {...}
Хм .. Я не уверен, что полностью понимаю, что делает код выше jQuery? Изменяет ли класс кнопок? или? Извините, я не использовал jQuery. –
Я посмотрел в jQuery, и теперь это имеет больше смысла. Благодарю. –
Эй, извините за поздний ответ. Да, поэтому нет никакого естественного способа сделать это без javascript. Что он делает, если этот элемент не имеет «нажатого» класса, он добавит этот класс при щелчке по элементу. И если это произойдет, он просто удалит класс. Это скорее сокращенное свойство jquery, это также можно сделать с помощью функций addClass и removeClass, но toggleClass - это, в основном, оба из них объединены специально для таких целей. – Ege
Это вы что искали?
button[type=submit]
button[type=submit]:hover
button[type=submit]:active
EDIT: Сохраняя «щелкнул» государство будет работать что-то подобное с JQuery: http://jsfiddle.net/WYTHG/1/
Но как я могу изменить кнопку, когда ее щелкнули и останутся таким образом. Чтобы показать, что нажата? Спасибо –
Тогда вам придётся прибегнуть к добавлению класса при нажатии через javascript. – markvandencorput
Спасибо за помощь. –
Нормальное состояние должно быть ясно для вас, другие два могут стили с .element: парить и .element : активный
При нажатии на него должно оставаться новое изображение да. –
Активный статус отображается только при нажатии кнопки. Если вы хотите изменить изображение после клика, вам необходимо реализовать решение для JavaScript. –
Попробуйте http://jsfiddle.net/jfeltis/Ufs7u/
Спасибо, я просто не уверен, как заставить кнопку оставаться таким образом при нажатии? Спасибо. –
Вам нужно будет использовать javascript (jQuery будет самым простым решением), чтобы получить желаемый эффект. См. Jsfiddle @ markvandencorput. – Joe
Когда вы говорите щелкнул, вы имеете в виду изменения цвета во время действия щелчка (как ответил ': active' случай ниже), или что, когда нажата, она изменяется и остается, что цвет? –