Мне было интересно, как я могу добавить 3 состояния к кнопке отправки. Под состояниями я подразумеваю, что кнопка меняет изображение при наведении, нажатии и просто статичной/нетронутой. Я бы предпочел, чтобы решение использовало чисто HTML и CSS, но Javascript тоже подойдет. Спасибо!
3 состояния на кнопке отправки
Ответы (4)
Мне проще дать идентификаторы или классы таким вещам, чтобы упростить их. Вы можете сделать что-то подобное в jquery:
Допустим, у кнопки есть идентификатор #derp.
$("#derp").click(function(){
$(this).toggleClass("pressed");
});
В основном это добавит или удалит «нажатый» класс из элемента в зависимости от его состояния. Просто добавьте CSS для .pressed, и все готово.
#derp {...}
#derp:hover {...}
#derp:active {...}
#derp.pressed {...}
person
Ege
schedule
12.04.2012
хм .. Я не уверен, что полностью понимаю, так что же делает приведенный выше код jQuery? Это меняет класс кнопок? или? Извините, я не использовал jQuery.
- person Dragan Marjanovic; 12.04.2012
Я изучил jQuery, и теперь это имеет больше смысла. Спасибо.
- person Dragan Marjanovic; 12.04.2012
Эй, извините за поздний ответ. Да, так что нет собственного способа сделать это без javascript. Что он делает, так это то, что если этот элемент не имеет нажатого класса, он добавит этот класс при нажатии на элемент. И если это произойдет, он просто удалит класс. Это скорее сокращенное свойство в jquery, это также можно сделать с помощью функций addClass и removeClass, но toggleClass в основном объединяет их обоих специально для таких целей.
- person Ege; 13.04.2012
Причина использования переключателя заключается в том, что, поскольку вы хотите, чтобы он выбирался при нажатии, это либо что-то вроде поведения флажка, либо навигация по вкладкам. В обоих случаях требуется его деактивация в какой-то момент, и использование toggleClass позволяет сделать это проще.
- person Ege; 13.04.2012
Я хорошо вижу, добавляет ли он весь class=derp к тегу или просто добавляет значение derp к атрибуту класса. Нужно ли мне добавить атрибут класса или это делается автоматически. Еще раз извините за мою новизну и спасибо.
- person Dragan Marjanovic; 13.04.2012
да, он добавляет весь тег класса, если он отсутствует, или только класс, если у вас уже есть другой класс, поскольку у вас может быть несколько. Вам не нужно ничего делать. Вот небольшая демонстрация: jsfiddle.net/cQQWY/1
- person Ege; 13.04.2012
Ах, спасибо, это все объясняет.
- person Dragan Marjanovic; 13.04.2012
Это то, что вы ищите?
button[type=submit]
button[type=submit]:hover
button[type=submit]:active
РЕДАКТИРОВАТЬ: Сохранение состояния «нажато» будет работать примерно так с jQuery: http://jsfiddle.net/WYTHG/ 1/
person
markvandencorput
schedule
11.04.2012
Но как мне заставить кнопку меняться при нажатии и оставаться такой. Показать, что нажимается? Спасибо
- person Dragan Marjanovic; 12.04.2012
Тогда вам придется прибегнуть к добавлению класса по клику через javascript.
- person markvandencorput; 12.04.2012
Попробуйте это http://jsfiddle.net/jfeltis/Ufs7u/
person
Joe
schedule
11.04.2012
Спасибо, я просто не знаю, как заставить кнопку оставаться в этом положении при нажатии? Спасибо.
- person Dragan Marjanovic; 12.04.2012
Вам нужно будет использовать javascript (jQuery будет самым простым решением), чтобы получить желаемый эффект. См. jsfiddle @markvandencorput.
- person Joe; 12.04.2012
Нормальное состояние должно быть вам понятно, два других могут стилизоваться с помощью .element:hover и .element:active
person
Sven Bieder
schedule
11.04.2012
При нажатии на него должно оставаться новое изображение да.
- person Dragan Marjanovic; 12.04.2012
Статус :active отображается только до тех пор, пока сама кнопка нажата. Если вы хотите изменить изображение после клика, вам необходимо реализовать решение javascript.
- person Sven Bieder; 12.04.2012
:activeниже) или что после щелчка он меняется и остается в этом цвете? - person Mike Guthrie schedule 11.04.2012