к тегу input можно добавить свойство hover?

duncan

батяр з личакова
Регистрация
10 Апр 2007
Сообщения
1.599
Реакции
450
суть -- чтобы кнопка имела три вида: при наведении, нажатии и обычный.
 
самих инпатов достаточно много, лучше указать конкретно какие именно требуются
вот пример для кнопок:

HTML:
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover{
background:блаблабла;
cursor:pointer;
}

остальные (чекбоксы, радиобоксы и прочие пассворды) останутся стандартными
 
кстати, интересный феномен наблюдаю!
если есть три стиля с кнопками-сабмитами, то работатет только первая, которая указана в стилях
пример:

HTML:
<style>
.big_button input[type="submit"]{ background:url(images/big_button.png) no-repeat 0 0; width:234px; height:53px; border:none; cursor:pointer;}
.big_button input[type="submit"]:hover{ background:url(images/big_button.png) no-repeat 0 -53px;}
.big_button input[type="submit"]:active{ background:url( background:url(images/big_button.png) no-repeat 0 -106px;}
 
.middle_button input[type="submit"]{ background:url(images/middle_button.png) no-repeat 0 0; width:201px; height:53px; border:none; cursor:pointer;}
.middle_button input[type="submit"]:hover{ background:url(images/middle_button.png) no-repeat 0 -53px;}
.middle_button input[type="submit"]:active{ background:url( background:url(images/middle_button.png) no-repeat 0 -106px;}
 
.gray_button input[type="submit"]{ background:url(images/gray_button.png) no-repeat 0 0; width:201px; height:53px; border:none; cursor:pointer;}
.gray_button input[type="submit"]:hover{ background:url(images/gray_button.png) no-repeat 0 -53px;}
.gray_button input[type="submit"]:active{ background:url( background:url(images/gray_button.png) no-repeat 0 -106px;}
</style>
 
<div class="big_button">
<form action="#9" method="post">
<input value="Большая оранжевая кнопка" type="submit" />
</form>
</div>
 
<div class="middle_button">
<form action="#0" method="post">
<input value="Малая оранжевая кнопка" type="submit" />
</form>
</div>
 
<div class="gray_button">
<form action="#0" method="post">
<input value="Серая кнопка" type="submit" />
</form>
</div>

1.JPG

проблема в :active
как пофиксить?
 
конечно, там ошибка. Никакого феномена здесь нет, это опечатка:
:active{ background:url( background:url(images/big_button.png) no-repeat 0 -106px;}
А должно быть:
:active{ background:url(images/big_button.png) no-repeat 0 -106px;}
В остальных стилях также.
 
Назад
Сверху