Изменение картинки при наведении

Тема в разделе "Верстка", создана пользователем nomak11, 28 июн 2014.

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

    nomak11 Постоялец

    Регистр.:
    17 ноя 2013
    Сообщения:
    99
    Симпатии:
    9
    Добрый вечер. Помогите пожалуйста задать стиль при наведении на картинку возле поиска (лупа) Перейти по ссылке
     
  2. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    530
    Симпатии:
    250
    Код:
    form.art-search input[type="submit"], input.art-search-button:hover
    Это псевдокласс :hover
    Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

    Перейти по ссылке
     
  3. nomak11

    nomak11 Постоялец

    Регистр.:
    17 ноя 2013
    Сообщения:
    99
    Симпатии:
    9
    Я так и написал сразу
    input.art-search-button:hover{background-position: 0 -40px;}
    , но не срабатывает.
     
  4. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    530
    Симпатии:
    250
    попробуй именно так:
    form.art-search input[type="submit"], input.art-search-button:hover
    2014-06-28 04-12-52 Слуцк. Информационный сайт Слуцка. - Слуцк   сайт Слуцка - Mozilla Firefox.png
     
  5. nomak11

    nomak11 Постоялец

    Регистр.:
    17 ноя 2013
    Сообщения:
    99
    Симпатии:
    9
    А если так, то работает как команда для пассива, а не при наведении...
     
  6. ITeshnik

    ITeshnik Постоялец

    Регистр.:
    21 май 2007
    Сообщения:
    105
    Симпатии:
    5
    Код:
    form.art-search input[type="submit"], input.art-search-button:hover
    отрабатывает правильно, ибо ты назначаешь элементу в обеих состояниях одно и тоже значение
    по этому в начальном положении:
    Код:
    form.art-search input[type="submit"], input.art-search-button, a.art-search-button{
    background:url("../images/searchicon.png") no-repeat scroll 0 0
    }
    
    0 0 - это изначальная позиция фона. Почитай подробнее про сокращёное написание свойства background

    а стиль ховер эфекта должен быть
    Код:
    form.art-search input[type="submit"]:hover, input.art-search-button:hover, a.art-search-button:hover{
    background-position:0 -40px;
    }
    
     
    nomak11 нравится это.
  7. nomak11

    nomak11 Постоялец

    Регистр.:
    17 ноя 2013
    Сообщения:
    99
    Симпатии:
    9
    Спасибо, помогло)
     
  8. Frangovalex

    Frangovalex Писатель

    Регистр.:
    3 фев 2014
    Сообщения:
    1
    Симпатии:
    0
    Ну по хорошему, если изображение не спрайтовое то hover воспримет любое новое значение background
     
  9. ITeshnik

    ITeshnik Постоялец

    Регистр.:
    21 май 2007
    Сообщения:
    105
    Симпатии:
    5
    как-раз, таки по хорошему, это когда изображение спрайтом
     
  10. Savetchuk

    Savetchuk Создатель

    Регистр.:
    10 июн 2014
    Сообщения:
    11
    Симпатии:
    1
    <img src="Picture.gif" name="MyPicture" alt="моя картинка" border="0" onMouseOver="window.document.images['MyPicture'].src='NewPicture.gif';" onMouseOut="window.document.images['MyPicture'].src='Picture.gif';">