Как создать ссылку с изображением hover в простом CSS

Обновлено: 27 февраля 2020 г. / Автор статьи: Джерри Лоу

* Обновление заметок: эта публикация была впервые опубликована в октябре 2009 года. Некоторые из упомянутых мной методов, возможно, устарели. Пожалуйста, обратитесь к это руководство по новейшей технике создания сайтов.

Что за парение? Определение, приведенное в UWStout.edu:

«Наведение» - это эффект, возникающий при наведении курсора на ссылку любого типа. Ссылка может быть закодирована, чтобы реагировать на наведение, изменяя цвет, показывая новую графику или даже воспроизводя звуковой файл.

Эффект наведения повышает удобство использования в Интернете и помогает владельцам Интернета направлять свой веб-трафик. Если вы хотите, чтобы пользователи обращали особое внимание на специальную ссылку, хороший способ сделать это - создать ссылку с привлекательным эффектом наведения. Такой простой эффект наведения (простое подчеркивание и изменение цвета текста) указывает на то, что этот текст «доступен для кликов», и улучшает взаимодействие в Интернете. Однако изменение цвета и стилей текста (подчеркивание / наложение / полужирный шрифт) - это очень простые вещи, и с помощью наведения можно сделать гораздо больше.

В этой статье я собираюсь показать, как вы можете создавать красивые ссылки с эффектом наведения.

Пример 1: ссылка с кнопкой наведения

Во-первых, посмотрите на рабочий пример (наведите указатель мыши на ссылку, чтобы увидеть, как это работает - изменение значка сбоку).

Пример 1. Ссылка с изображением кнопки наведения

Это завершенная версия того, что будет построено в этом примере.

Как мы создаем его в виде простого CSS?

Изображение кнопки

Шаг 1, как вы можете видеть, нам нужны значки стрелок в двух разных версиях. В нашем примере я использовал красный (#CC3300) в качестве кнопки ссылки по умолчанию; и серый (#333333) для эффекта наведения. Такая кнопка может быть легко сделана с использованием любого программного обеспечения для редактирования изображений.

Теперь у нас есть кнопка красного цвета (скажем, b1.png) и цвет rey (например, b2.png). Слейте эти два в один файл изображения с помощью b1.png поверх b2.png. Это будет наш окончательный образ для ссылки. Назовите его (скажем, x.png) и загрузите нужное место (для моего случая я поместил его в мою папку шаблонов WP).

Для справки:

b1.png , b2.png , и x.png

Код CSS

Далее, в коде CSS. В основном то, что мы хотим достичь, - это отступы от текста ссылки немного вправо, чтобы освободить место для кнопки; и в то же время отображать другое изображение, когда ссылка находится в состоянии зависания. Это довольно фундаментальные вещи, за исключением того, что нам нужно немного закрутить фоновую позицию. Хитрость заключается в том, чтобы показать верхнюю часть изображения (красную кнопку) для исходной ссылки; и при наведении на место, замените фоновое изображение краем -11px (он может отличаться на вашем веб-сайте), чтобы отобразить кнопку серого цвета.

.xa {color: #cc3300; отступ слева: 14px; вес шрифта: полужирный; background-image: url (images / x.png); background-position: 0 2px; повторение фона: без повтора; }
.xa: hover {color: #333333; отступ слева: 14px; вес шрифта: полужирный; background-image: url (images / x.png); background-position: 0 -11px; повторение фона: без повтора; }

Реализация

Чтобы показать этот эффект при наведении, просто вставьте класс x в обозначенную область. Вот пример того, как вы можете это сделать.

Домашняя страница

Пример 2: ссылка в фоновом режиме

С одной и той же концепцией, есть бесконечные способы сделать ваши ссылки классными. Вот еще один пример того, что мы можем сделать с эффектами наведения с помощью немного другого метода. Опять же, посмотрите на готовую версию.

Пример 2 - Ссылка на фоне наведения

В этом примере я сделаю так, чтобы создать гиперссылку, понравившуюся кнопкам, где фон будет меняться, когда пользователи нанесут над ним мышь.

Как мы создаем его в виде простого CSS?

Фоновые изображения

Сначала создайте два изображения скругленного прямоугольника. Для демонстрации мы не будем объединять эти два изображения в этом примере. Мы назовем красный (#CC3300) прямоугольник как b1.png; и бордовый (#9F2800) прямоугольник как b2.png.

Код CSS

Далее, вот коды для вашей таблицы стилей (мы называем класс «y» во втором примере).

ay {width: 280px; высота: 42px; цвет: #000000; отступы: 10px; текст-отделка: нет; дисплей: блок; вес шрифта: полужирный; background-image: url (images / b1.png); повторение фона: без повтора; }
ay: hover {width: 280px; высота: 42px; цвет: #FFFFFF; отступы: 10px; вес шрифта: полужирный; текст-отделка: нет; дисплей: блок; background-image: url (images / b2.png); повторение фона: без повтора; }

Реализация

Чтобы отобразить ссылку, просто вставьте класс (y) в тег в исходном коде. Пример:

Домашняя страница

Подведение итогов

Я надеюсь, что эта статья принесла вам ценную информацию и вдохновила некоторых из вас использовать CSS творчески. Если есть какие-то другие моменты, которые, по вашему мнению, я должен добавить в это руководство, не стесняйтесь оставлять свои идеи в разделе комментариев.

О Джерри Лоу

Основатель WebHostingSecretRevealed.net (WHSR) - обзора хостинга, которому доверяют и используют пользователи 100,000. Более чем 15-летний опыт в веб-хостинге, партнерском маркетинге и SEO. Вкладчик в ProBlogger.net, Business.com, SocialMediaToday.com и многое другое.

Подключение: