Плавно изменить цвет ссылки - «Ссылки» » Новости мира Интернет
АЭС — это долго: в Казахстане построят «долину ЦОД» с питанием от угольных электростанций - «Новости сети»
АЭС — это долго: в Казахстане построят «долину ЦОД» с питанием от угольных электростанций - «Новости сети»
«Да здравствует Принц!»: в ответ на отмену ремейка GOG спасёт классическую Prince of Persia: The Sands of Time от цифрового небытия - «Новости сети»
«Да здравствует Принц!»: в ответ на отмену ремейка GOG спасёт классическую Prince of Persia: The Sands of Time от цифрового небытия - «Новости сети»
«Google Фото» научились превращать фотографии пользователей в мемы с помощью ИИ - «Новости сети»
«Google Фото» научились превращать фотографии пользователей в мемы с помощью ИИ - «Новости сети»
Проблемное январское обновление Windows 11 отказывается удаляться — два способа вернуть систему в норму - «Новости сети»
Проблемное январское обновление Windows 11 отказывается удаляться — два способа вернуть систему в норму - «Новости сети»
В Китае придумали, как обмануть Вселенную и занедорого зажечь «искусственное солнце» на Земле - «Новости сети»
В Китае придумали, как обмануть Вселенную и занедорого зажечь «искусственное солнце» на Земле - «Новости сети»
Россияне оспорили отказ суда рассматривать иск о блокировке звонков в Telegram и WhatsApp - «Новости сети»
Россияне оспорили отказ суда рассматривать иск о блокировке звонков в Telegram и WhatsApp - «Новости сети»
Sony анонсировала первый за семь лет проигрыватели виниловых пластинок - «Новости сети»
Sony анонсировала первый за семь лет проигрыватели виниловых пластинок - «Новости сети»
Intel упускает миллиарды из-за дефицита процессоров и производственных проблем — акции рухнули на 11 % - «Новости сети»
Intel упускает миллиарды из-за дефицита процессоров и производственных проблем — акции рухнули на 11 % - «Новости сети»
Илон Маск пообещал, что роботы Tesla Optimus точно-точно поступят в продажу в конце 2027 года - «Новости сети»
Илон Маск пообещал, что роботы Tesla Optimus точно-точно поступят в продажу в конце 2027 года - «Новости сети»
Луна подождёт: третий пуск ракеты Blue Origin New Glenn в конце февраля доставит спутник главного конкурента Starlink - «Новости сети»
Луна подождёт: третий пуск ракеты Blue Origin New Glenn в конце февраля доставит спутник главного конкурента Starlink - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Ссылки » Плавно изменить цвет ссылки - «Ссылки»
Internet Explorer Chrome Opera Safari Firefox
10+ 25+ 12.10+ 6.1+ 16+

Задача

Плавно изменить цвет ссылки при наведении на неё указателя мыши.

Решение

Цвет ссылки устанавливается через свойство color, которое добавляется к селектору A. Для изменения цвета ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, а чтобы смена цвета происходила плавно, к селектору A следует добавить свойство transition, значением которого выступает время. Оно указывается обычно в секундах или миллисекундах.

Пример 1. Изменение цвета ссылок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет ссылок</title>
  <style>
   a {
    color: #008; /* Цвет текста */
    background: #ffc; /* Цвет фона */
    padding: 2px; /* Поля вокруг текста */
    transition: 1s linear; /* Время изменения */
   
   a:hover {
    color: #fff; /* Цвет текста */
    background: #008; /* Цвет фона */
   
  </style>
 </head>
 <body>
  <p>Для сборки <a href="megadroid.html">мегадроида</a> требуется
  открыть коробку, достать мешочек с микросхемами и сложить их в нужном порядке,
  пользуясь нашим подробным 8631-страничным
  <a href="manual.html">руководством</a>.</p>
 </body>
</html>

В данном примере для наглядности выбраны контрастные цвета и задано время перехода одна секунда. На рабочем сайте время лучше установить меньше, 0.6s или около того. Так что подбирайте значение по своему вкусу и желанию.


Internet Explorer Chrome Opera Safari Firefox 10 25 12.10 6.1 16 Задача Плавно изменить цвет ссылки при наведении на неё указателя мыши. Решение Цвет ссылки устанавливается через свойство color, которое добавляется к селектору A. Для изменения цвета ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, а чтобы смена цвета происходила плавно, к селектору A следует добавить свойство transition, значением которого выступает время. Оно указывается обычно в секундах или миллисекундах. Пример 1. Изменение цвета ссылок В данном примере для наглядности выбраны контрастные цвета и задано время перехода одна секунда. На рабочем сайте время лучше установить меньше, 0.6s или около того. Так что подбирайте значение по своему вкусу и желанию.
Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Смотрите также

А что там на главной? )))



Комментарии )))