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

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

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

    nomak11 Постоялец

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

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    525
    Симпатии:
    235
    Код:
    form.art-search input[type="submit"], input.art-search-button:hover
    Это псевдокласс :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
    Сообщения:
    525
    Симпатии:
    235
    попробуй именно так:
    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';">