Как поменять цвет ссылки при наведении в css
Перейти к содержимому

Как поменять цвет ссылки при наведении в css

  • автор:

Ссылка

Утилиты ссылок используются для стилизации ваших якорей, чтобы настроить их цвет, непрозрачность, смещение подчеркивания, цвет подчеркивания и многое другое.

На этой странице На этой странице

Непрозрачность ссылки

Измените альфа-прозрачность значения цвета ссылки rgba() с помощью утилит. Имейте в виду, что изменения непрозрачности цвета могут привести к ссылкам с недостаточной контрастностью.

p>a class="link-opacity-10" href="#">Link opacity 10a>p> p>a class="link-opacity-25" href="#">Link opacity 25a>p> p>a class="link-opacity-50" href="#">Link opacity 50a>p> p>a class="link-opacity-75" href="#">Link opacity 75a>p> p>a class="link-opacity-100" href="#">Link opacity 100a>p>

Вы даже можете изменить уровень непрозрачности при наведении.

p>a class="link-opacity-10-hover" href="#">Непрозрачность при наведении ссылки 10a>p> p>a class="link-opacity-25-hover" href="#">Непрозрачность при наведении ссылки 25a>p> p>a class="link-opacity-50-hover" href="#">Непрозрачность при наведении ссылки 50a>p> p>a class="link-opacity-75-hover" href="#">Непрозрачность при наведении ссылки 75a>p> p>a class="link-opacity-100-hover" href="#">Непрозрачность при наведении ссылки 100a>p>

Подчеркивание ссылки

Цвет подчеркивания

Измените цвет подчеркивания независимо от цвета текста ссылки.

p>a href="#" class="link-underline-primary">Primary underlinea>p> p>a href="#" class="link-underline-secondary">Secondary underlinea>p> p>a href="#" class="link-underline-success">Success underlinea>p> p>a href="#" class="link-underline-danger">Danger underlinea>p> p>a href="#" class="link-underline-warning">Warning underlinea>p> p>a href="#" class="link-underline-info">Info underlinea>p> p>a href="#" class="link-underline-light">Light underlinea>p> p>a href="#" class="link-underline-dark">Dark underlinea>p>

Смещение подчеркивания

Измените расстояние подчеркивания от вашего текста. Смещение задается в единицах em для автоматического масштабирования с текущим размером шрифта элемента font-size .

p>a href="#">Ссылка по умолчаниюa>p> p>a class="link-offset-1" href="#">Смещение 1 ссылкиa>p> p>a class="link-offset-2" href="#">Смещение 2 ссылкиa>p> p>a class="link-offset-3" href="#">Смещение 3 ссылкиa>p>

Непрозрачность подчеркивания

Измените непрозрачность подчеркивания. Требуется добавить .link-underline , чтобы сначала установить цвет rgba() , который мы используем, чтобы затем изменить непрозрачность альфа-канала.

p>a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Непрозрачность подчеркивания 0a>p> p>a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Непрозрачность подчеркивания 10a>p> p>a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Непрозрачность подчеркивания 25a>p> p>a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Непрозрачность подчеркивания 50a>p> p>a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Непрозрачность подчеркивания 75a>p> p>a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Непрозрачность подчеркивания 100a>p>

Варианты наведения

Как и утилиты .link-opacity-*-hover , утилиты .link-offset и .link-underline-opacity по умолчанию включают варианты :hover . Смешивайте и сочетайте, чтобы создавать уникальные стили ссылок.

a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">  Непрозрачность подчеркивания 0 a>

Цветные ссылки

Вспомогательные функции для цветных ссылок были обновлены для работы с нашими утилитами для работы со ссылками. Используйте новые утилиты для изменения непрозрачности ссылки, непрозрачности подчеркивания и смещения подчеркивания.

p>a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary linka>p> p>a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary linka>p> p>a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success linka>p> p>a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger linka>p> p>a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning linka>p> p>a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info linka>p> p>a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light linka>p> p>a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark linka>p> p>a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis linka>p>

Совет по специальным возможностям. Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что смысл очевиден из самого содержимого (например, видимый текст с достаточным цветовым контрастом) или включается с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden .

CSS

В дополнение к следующим функциям Sass, рассмотрите возможность прочитать о наших включенных пользовательских свойствах CSS (также известных как переменные CSS) для цветов и многого другого.

Sass API утилиты

Утилиты ссылок объявлены в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилит.

"link-opacity": (  css-var: true,  class: link-opacity,  state: hover,  values: (  10: .1,  25: .25,  50: .5,  75: .75,  100: 1  ) ), "link-offset": (  property: text-underline-offset,  class: link-offset,  state: hover,  values: (  1: .125em,  2: .25em,  3: .375em,  ) ), "link-underline": (  property: text-decoration-color,  class: link-underline,  local-vars: (  "link-underline-opacity": 1  ),  values: map-merge(  $utilities-links-underline,  (  null: rgba(var(--#$prefix>link-color-rgb), var(--#$prefix>link-underline-opacity, 1)),  )  ) ), "link-underline-opacity": (  css-var: true,  class: link-underline-opacity,  state: hover,  values: (  0: 0,  10: .1,  25: .25,  50: .5,  75: .75,  100: 1  ), ),
  • Разработано и создано со всей любовью командой Bootstrap с помощью наших участников.
  • Код под лицензией MIT, документация CC BY 3.0.
  • Текущая версия 5.3.2.

Как изменить вид ссылки при наведении

В таблице стилей у ссылки есть специальный псевдокласс :hover . Он отвечает за стиль при наведении. Как только курсор будет убран с ссылки, она вернется в исходное состояние.

Примеры с изменением вида ссылки при наведении

Пример 1. Как изменить цвет и сделать подчеркивание при наведении

html> head> style> a.class_A1< /* Стиль ссылки по умолчанию */ color: blue; text-decoration: none; > a.class_A1:hover< /* Стиль ссылки при наведение */ color: red; /* Изменяем цвет на красный */ text-decoration: underline; /* Добавляем подчеркивание */ > /style> /head> body> При наведении ссылка станет красной и подчеркнутой: a class css">class_A1" href value">URL">ссылкаa> /body> /html>

Преобразуется на странице в следующее:

При наведении ссылка станет красной и подчеркнутой: ссылка

Пример 2. Как изменить фон ссылки при наведении

html> head> style> a.class_A2< color: blue; text-decoration: none; background: none; padding: 2px; > a.class_A2:hover< color: white; background: blue; > /style> /head> body> При наведении ссылка изменит фон на синий, а цвет ссылки станет белым: a class css">class_A2" href value">URL">ссылкаa> /body> /html>

Преобразуется на странице в следующее:

При наведении ссылка изменит фон на синий, а цвет ссылки станет белым: ссылка

Пример 3. Как поменять курсор при наведении на ссылку

По умолчанию у ссылок курсор при наведении имеет значение cursor : pointer . В следующем примере мы изменим его на другой.

html> head> style> a.class_A3< /* Стиль ссылки по умолчанию */ color: blue; text-decoration: none; cursor: default; /* Курсор по умолчанию */ > a.class_A3:hover< /* Стиль ссылки при наведение */ color: red; /* Изменяем цвет на красный */ text-decoration: underline; /* Добавляем подчеркивание */ cursor: crosshair; /* Изменяем курсор */ > /style> /head> body> При наведении ссылка станет красной и подчеркнутой, а курсор станет в виде плюса: a class css">class_A3" href value">URL">ссылкаa> /body> /html>

Преобразуется на странице в следующее:

При наведении ссылка станет красной и подчеркнутой, а курсор станет в виде плюса: ссылка

Пример 4. Сглаженное изменение стилей ссылки

С помощью свойства transition мы сгладим скорость изменения фона и цвета ссылки.

html> head> style> a.class_A4< color: blue; text-decoration: none; background: #B9D3EE; padding: 4px; font-weight: bold; border-radius: 4px; transition: background 1s ease, color 0.5s ease; /*Для браузера Google Chrome и Firefox:*/ -webkit-transition: background 1s ease, color 0.5s ease; -moz-transition: background 1s ease, color 0.5s ease; > a.class_A4:hover< color: white; background: blue; > /style> /head> body> При наведении ссылка изменит фон на синий, а цвет ссылки станет белым, при этом все это будет сглажено: a class css">class_A4" href value">URL">ссылкаa> /body> /html>

Преобразуется на странице в следующее:

Пример 5. Красивое подчеркивание ссылки

html> head> style> a.class_A5< color: blue; text-decoration: none; > a.class_A5:hover< color: red; border-bottom: 2px dashed #8A2BE2; /* С помощью этого свойства задаем стиль подчеркивания */ > /style> /head> body> При наведении ссылка изменит цвет и появится необычное подчеркивание: a class css">class_A5" href value">URL">ссылкаa> /body> /html>

Преобразуется на странице в следующее:

Оформление ссылок с плавным эффектом для CSS

Всем привет. Чем же вас удивить? Может, оформлением ссылок с плавным эффектом для CSS? Я вам расскажу и покажу на примере, как оформить ссылку в тесте, как оформить ссылку в картинке с эффектом затухания на стандартном CSS без использования JavaScript. В общем, вы сейчас все увидите, если прочитаете статью до конца.

Оформление ссылки с фоном в тексте.

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

 У ссылок плавно меняется цвет фона.

Создаем в HTML-документе ссылку с классом .linktext

Теперь пропишем к ссылке стиль:

/*Плавный переход*/ a < -webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши*/ -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; transition: all linear 0.3s; >/*Текстовые ссылки*/ .linktext < padding: 1px 3px; /*Отступы внутри ссылки*/ background-color: #f53799; /*Цвет фона ссылки*/ text-decoration: none; /*Ссылка без подчеркивания*/ font-size: 13px; /*Размер текста*/ color: white; /*Цвет ссылки*/ border-radius: 2px; /*Скругленные углы*/ -webkit-border-radius: 2px; /*Скругленные углы*/ -moz-border-radius: 2px; /*Скругленные углы*/ >.linktext:hover < background-color: #db0071; /*Цвет фона ссылки*/ >

А вот так будет выглядеть код полной готовности.

   Оформление ссылок   

Save a lot of work with CSS! In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once. bloggood.ru

Read more »

Посмотреть на результат работы в примере:

Просмотреть пример.

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

Изображение будет немного находиться в тумане и, когда пользователь наведет курсор мышки на изображение ссылки, тогда туман плавно исчезнет.
1 картинка — изображение находится в обычном состоянии.
2 картинка — картинка становится четче при наведении мышки.

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

В HTML-документе пропишем ссылку к картинке.

Теперь изображение стало ссылкой и ей можно прописать стиль «тумана».

*Ссылка изображение*/ a img < border: 10px solid #dddddd; /*Граница вокруг изображения*/ margin: 0 15px 15px 0; /*Отступы от изображения*/ -webkit-transition: all linear 0.3s; /*Устанавливаем плавный переход при наведении курсора мыши */ -moz-transition: all linear 0.3s; -ms-transition: all linear 0.3s; -o-transition: all linear 0.3s; transition: all linear 0.3s; opacity: 0.5; /*Прозрачность изображения*/ >a:hover img < opacity: 1; /*Делаем изображения непрозрачным*/ border: 10px solid #afd3dc; /*Изменяем цвет границы*/ >

А вот так будет выглядеть код в полной готовности.

   Оформление ссылок     

Посмотреть на результат работы в примере:

Просмотреть пример.

Кнопки меню с плавным переходом.

Все анологично. При наведении мышки на кнопку в меню, вы увидите плавный переход фона.

Перейдем сразу к готовому коду.

   Оформление ссылок   

Посмотреть на результат работы в примере:

Пунктирная ссылка с плавным переходом.

Чтобы долго не объяснять как выглядит конечный результат, просто посмотрите готовый пример и вам станет все сразу понятно.

    Оформление ссылок      

Дорогие читатели, подписывайтесь на мою RSS-ленту новостей, я всегда стараюсь добавлять новые интересные полезные статьи!

Как сделать эффект подчёркивания при наведении
курсора на ссылки в ZeroBlock для Tilda

Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.

Связаться с нами
Задать вопрос
Купить шаблон

Стоимость 400 руб
Вы получаете данный пример на свой аккаунт в Тильда, сможете редактировать и изменять его под свои задачи
(доступно для аккаунтов Tilda Personal и выше)

Заказать установку примера

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

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

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