Смена изображения при наведении курсора

Автор:
Nurlan Kemelbekov

1. Простая смена изображения при наведении курсора мыши. Если у вас есть индивидуальный дизайн, то можете легко создать образ, который сменяется в другое изображение (или другой версии того же изображения) при наведении мыши на него.

Все это занимает немного кодирования в редакторе CSS и немного дополнительного кодирования в так называемом «Текст» режиме на странице редактора (или в текстовом виджете).

А) Простая смена картинки Вставить это в файл CSS style.
Загрузить изображения с компьютера и вставить их обычным способом. Убедитесь, что код для второго изображения расположен сразу после первого, без пробела или линии разрыва между ними.

.roll { position: relative; display: inline-block; }
.rollover { position: absolute; top: 0; left:0; }
.roll .rollover { display: none; }
.roll:hover .rollover { display: block; }

Добавить «Regular» к классу атрибута одного изображения и «rollover» к классу атрибута другого изображения. Теперь заключите коды изображений в паре див тегов:

<div class="roll">
<img class="regular" src="url картинки" /><img class="rollover" src="url картинки"  />
</div>

Б) Если вы хотите сделать опрокидывание изображения интерактивными (т.е. сделать его ссылкой на какой-то URL), установите обычный URL и вставьте в соответствующем поле, прежде чем вставлять второе изображения. В этом случае полный код будет выглядеть следующим образом:

<div class="roll">
<img class="regular" src="url картинки"  /><a href="URL веб-страницы ЗДЕСЬ"><img class="rollover" src="url картинки"  /></a>
</div>

C) Другое содержание. Та же самая техника может использоваться, чтобы сделать любой блок изменения содержимого при наведении на него курсора. Например:

<div class="roll">
<p class="regular">ОЧЕРЕДНОЙ ПУНКТ ЗДЕСЬ</p>
<p class="rollover">ВТОРОЙ ПУНКТ ЗДЕСЬ</p>
</div>

2. Постепенное изменение (crossfade). Более элегантно выглядит постепенная смена изображения. Только для этого требуется другой CSS. Примечание: это не работает в IE9 и более ранние версии. Как и в примере выше, применим другой класс для внешнего div. Например:

<div class="crossfade">
<img class="regular" src="url картинки "  /><img class="rollover" src="url картинки "  />
</div>

Стили CSS

.crossfade {
position: relative;
}
.crossfade .regular, .crossfade .rollover {
-webkit-transition: opacity 0.8s ease-in;
-moz-transition: opacity 0.8s ease-in;
-o-transition: opacity 0.8s ease-in;
transition: opacity 0.8s ease-in;
}
.crossfade .regular {
position: static;
}
.crossfade .rollover {
position: absolute;
top: 0;
left: 0;
}
.crossfade .rollover, .crossfade .regular:hover {
opacity: 0;
}
.crossfade .regular, .crossfade .rollover:hover {
opacity: 1;
}

Изменение количества в свойствах transition регулирует длительность перехода. Значение «ease-in» означает скорость.

Эта статья является дополнением к публикации статьи под названием «Простой способ плавного увеличения изображения при наведении курсора«. Я также рекомендую прочитать статью «Увеличение и последующее уменьшение объекта«.



Вам также может понравиться:


16 комментарий на “Смена изображения при наведении курсора

  1. Добрый день!
    Спасибо огромное за решение проблемы!

  2. Добрый день! Чтобы не отвлекать публику моими комментариями новичка, можно ли Вам подробно описать мою проблему на email?
    Заранее спасибо!

  3. только что проверил style.css — он выглядит точно также как в Вашем примере, кроме того, что 0,8 заменено на 0,1. Странно, что у Вас код отображается по другому.
    Или я не там смотрю?
    Кроме .crossfade там еще добавлено .roll. Это нельзя делать в рамках одного файла style.css?

  4. Я так и делаю, как показано в Вашем примере — все обернуто в div class=»crossfade», но когда я пытаюсь либо обернуть в тег center всю конструкцию div class=»crossfade», либо каждую из картинок (regular и rollover) по отдельности, то по центру выравнивается только картинка regular, а картинка rollover остается выровненной слева.

    • Пожалуйста, напишите конкретней, чего Вы добиваетесь. Вы хотите, чтобы иконка справа или слева оказалась по центру? Мне кажется, что у Вас все прекрасно выглядит на сайте.

  5. тег center не выравнивает картинку rollover по центру, зато выравнивает regular

    • Я не пойму, почему бы Вам просто не обернуть в div class=»crossfade» Ваши иконки, как показано в примере и не изобретать велосипед.
      Кстати, в Вашем файле style.css код выглядит не совсем, как в примере с этой страницы:
      .crossfade .regular, .crossfade .rollover:hover {
      opacity: 1;
      }
      .crossfade .rollover, .crossfade .regular:hover {
      opacity: 0;
      }
      .crossfade .rollover {
      position: absolute;
      top: 0;
      left: 0;
      }
      .crossfade .regular, .crossfade .rollover {
      -webkit-transition: opacity 0.1s ease-in;
      -moz-transition: opacity 0.1s ease-in;
      -o-transition: opacity 0.1s ease-in;
      transition: opacity 0.1s ease-in;
      }
      .rollover {
      position: absolute;
      top: 0;
      left: 0;
      }
      Это то, что в style.css у Вас.

  6. Добрый день!
    Если сделать вот так , то получается вот такая штука — см. иконку с телефоном htt p://light-smart.ru/
    Заранее спасибо за разъяснения, я в этом новичок.

    • При чем тут <a href=»ваша ссылка» rel=»nofollow»></a>? Если хотели просто показать Ваш сайт, я увидел его.

  7. Добрый день! А не подскажите как при использовании .crossfade сделать чтобы переключающееся изображение (в моем случае иконка) была выровнена по центру?
    Если пишу
    img class=»regular aligncenter»
    ….
    <img class="rollover aligncenter",
    То картинка regular по центру, а rollover — так и остается слева.

    • Не знаю, где Вы увидели в данном коде class «rollover aligncenter». Содержание внутри тегов center надежно во всех браузерах, потому что они теги уровня блока. Но тэг IMG является встроенным элементом. Вот почему поддерживаемые значения ALIGN являются те, которые показывают, как текст и другие элементы страницы должны отображаться в отношении к образу.

  8. У меня первый метод не сработал в IE11.
    Вернее, сработал частично — изображение (в моем случае gif) меняется не только при наведении на него, но и при попадании курсора в полосу, занимаемую изображением по высоте.

    • Андрей, спасибо за замечание. Я изменил немного css первого метода. Пожалуйста, попробуйте с обновленным CSS. Думаю, что это должно решить проблему. Проверил на IE.

  9. Огромная благодарность!! Долго мучился пока не мог сделать! И тут наткнулся на этот код! Спасибо! Сразу заработало!

  10. Спасибо, то что искал, реализовал у себя на женском сайте. Оказывается так просто, а я мучился с hover выдумывал так сказать велосипед..)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

5 × пять =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!