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

Тема в разделе "Верстка", создана пользователем duncan, 28 сен 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.591
    Симпатии:
    438
    суть -- чтобы кнопка имела три вида: при наведении, нажатии и обычный.
     
  2. crazyzubr

    crazyzubr Создатель

    Регистр.:
    26 авг 2012
    Сообщения:
    23
    Симпатии:
    15
    пупер нравится это.
  3. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    самих инпатов достаточно много, лучше указать конкретно какие именно требуются
    вот пример для кнопок:

    HTML:
    input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover{
    background:блаблабла;
    cursor:pointer;
    }
    остальные (чекбоксы, радиобоксы и прочие пассворды) останутся стандартными
     
    пупер нравится это.
  4. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    732
    Симпатии:
    323
    При наведении - button:hover
    При нажатии - button:active
     
  5. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.591
    Симпатии:
    438
    кстати, интересный феномен наблюдаю!
    если есть три стиля с кнопками-сабмитами, то работатет только первая, которая указана в стилях
    пример:

    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
    как пофиксить?
     
  6. crazyzubr

    crazyzubr Создатель

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