Разное

Цвет ссылки при наведении css: Как плавно изменить цвет ссылки?

11.06.2023

hover — Как при наведении на блок, поменять цвет текста вложенных элементов на чистом CSS?

Вопрос задан

Изменён 3 года назад

Просмотрен 2k раз

Всем привет!

Необходимо сделать так, чтобы при наведении на блок менялся цвет одновременно в заголовке, тексте и псевдоэлементе. Всегда подобные вещи делала на LESS, сейчас необходимо сделать на чистом CSS.

Как записать правильно на чистом CSS?

На LESS писала, например, так:

.overview-card-item {
            margin-right: 40px; 
            width: 18%;
            display: inline-block;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
            &:hover {
                h5 {
                    color: red;
                }
                p {
                    color: red;
                }
            }

Вот пример кода, в котором необходимо сделать изменения:

Пример кода на JSFiddle

  • css
  • hover

Хм, что-то я не понял сложности, ну вот так, если я вас верно понял

. overview-card-item:hover h5 {
  color: red
}
.overview-card-item:hover p {
  color: red
}

.overview-card-item {
    margin-right: 40px; 
    width: 18%;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
}
.overview-card-item:hover h5 {
    color: red;
}
.overview-card-item:hover p {
    color: red;
}

А для примера с jsfiddle так (остальные по аналогии):

.about-for-web-design .wrapper .cards .card:hover .card-title {
    color: red;
}

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

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

:hover — CSS — Дока

Кратко

Скопировано

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

Раньше интерактив можно было реализовать только при помощи JS, что сильно усложняло верстальщикам жизнь. Но сегодня у нас существует отличный помощник — псевдокласс :hover.

Пример

Скопировано

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

.link {  color: #000;  text-decoration: none;}.link:hover {  color: pink;  text-decoration: underline;}
          .link {
  color: #000;
  text-decoration: none;
}
.link:hover {
  color: pink;
  text-decoration: underline;
}

Как пишется

Скопировано

После любого селектора ставим двоеточие и пишем ключевое слово hover.

Селектор по тегу в состоянии

:hover

Скопировано

a:hover {  /* Стили */}
          a:hover {
  /* Стили */
}

Селектор по классу в состоянии

:hover

Скопировано

.link:hover {  /* Стили */}
          .link:hover {
  /* Стили */
}

Составной селектор в состоянии

:hover

Скопировано

li .link:hover {  /* Стили */}
          li .link:hover {
  /* Стили */
}

Селектор по id в состоянии

:hover

Скопировано

#id:hover {  /* Стили */}
          #id:hover {
  /* Стили */
}

Селектор по классу и его псевдоэлемент в состоянии

:hover

Скопировано

.link::before:hover {  /* Стили */}
          .link::before:hover {
  /* Стили */
}

Как понять

Скопировано

Браузер подставляет любому элементу, на который наводится курсор, пометку в виде автоматически создаваемого класса. Мы можем стилизовать этот класс на своё усмотрение, при этом сама логика и механизм отслеживания наведения курсора будут скрыты под капотом движка браузера.

Подсказки

Скопировано

💡 :hover можно очень круто анимировать, добавив в блок кода свойство transition 🎉

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

💡 Если дизайнер не нарисовал в макете разные состояния, либо просите у него это сделать, либо пропишите стили на своё усмотрение. Но любой элемент, на который можно нажать, должен иметь как минимум стили для :hover.

На практике

Скопировано

Дмитрий Волков советует

Скопировано

💡 А что если на сайт зайти с планшета, к которому подключена bluetooth-мышь? Однозначно, ховер должен работать! А если дополнительных устройств ввода нет, то, конечно, стили по наведению должны быть сброшены, чтобы избежать визуального залипания при нажатии на соответствующие элементы.

Вот удобная практика для таких случаев, она ещё и позволяет писать чуточку меньше кода.

🛠 Чтобы не писать дополнительные обнуления ховер-стилей для тач-устройств, состояние :hover удобно задавать внутри медиавыражений с условием по типу взаимодействия с устройством.

Пример, исключающий тач-устройства, но не полностью:

.link {  color: #ffffff;  text-decoration-color: #2E9AFF;  transition: background-color 0.5s linear;}/* Есть возможность навести указатель на элемент */@media (any-hover: hover) {  .link:hover {    background-color: #2E9AFF;    transition: background-color 0.1s linear;  }}
          
 
.link {
  color: #ffffff;
  text-decoration-color: #2E9AFF;
  transition: background-color 0.5s linear;
}
/* Есть возможность навести указатель на элемент */
@media (any-hover: hover) {
  .link:hover {
    background-color: #2E9AFF;
    transition: background-color 0.1s linear;
  }
}
Открыть демо в новой вкладке

🎁

Условие any-hover: hover допускает устройства с сенсорным экраном, но только если подключено дополнительное устройство ввода с нужной функциональностью для ховера (мышь, тачпад и т.

п.)

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

По аналогии можно использовать и другое состояние — :active.

Алёна Батицкая советует

Скопировано

🛠 Пользователь может зайти на ваш сайт не только с десктопа, где есть мышка и её можно на что-то навести, но и с планшета или телефона, где мышкой выступает палец, а его нельзя на что-то навести, им можно только тапнуть.

Хорошая практика — сбрасывать :hover стили для тач-устройств. Иначе при нажатии на какой-то элемент ховер-стили будут залипать — телефон не знает, когда вы отводите палец в сторону.

🛠 Сайт смотрится аккуратнее и интереснее, если изменение стилей происходит с лёгкой анимацией, а не резко. Этот принцип взят из окружающего нас мира. Вспомните хоть одно событие, которое происходит резко, моментально, без промежуточных стадий. Не вспомните 😏

Я в своей работе стараюсь делать анимацию стилей для наведения по принципу «появляется быстро, пропадает медленно». Это позволяет пользователю быстро увидеть реакцию на свои действия и не дожидаться окончания анимации.

.link {  color: #ffffff;  text-decoration-color: #2E9AFF;  /* Скорость исчезновения фонового цвета */  transition: background-color 0.5s linear;}.link:hover {  background-color: #2E9AFF;  /* Скорость изменения фонового цвета на голубой */  transition: background-color 0.1s linear;}
          .link {
  color: #ffffff;
  text-decoration-color: #2E9AFF;
  /* Скорость исчезновения фонового цвета */
  transition: background-color 0.5s linear;
}
.link:hover {
  background-color: #2E9AFF;
  /* Скорость изменения фонового цвета на голубой */
  transition: background-color 0.1s linear;
}
Открыть демо в новой вкладке

Ссылка быстро (за 0.1 секунды) меняет фоновый цвет на голубой при наведении курсора и чуть медленнее (за 0.5 секунды) приходит обратно в исходное состояние, когда курсор уводится за пределы ссылки.

🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link — :visited — :focus — :hover — :active.

Этот порядок легко запомнить в виде аббревиатуры LVFHA и мнемоники LoVe Fears HAte.

Использование ссылок CSS с реальными примерами

TL;DR — свойства могут добавлять цвета ссылок CSS в соответствии с состояниями ссылок.

Содержание
  • 1. Цвет ссылки CSS: основные советы
  • 2. Состояния ссылки
  • 3. Цвет ссылки CSS
  • 4. Оформление текста
  • 5. Цвет фона
  • Меню 9007 6. Кнопки навигации
  • 7. Цвет ссылки CSS: Сводка

Цвет ссылки CSS: Основные советы

  • Есть
    4     ссылка состояния: a:active , a:hover , a:посетили и a:ссылка .
  • Чтобы избежать перекрытия поведения, эти состояния должны идти в следующем порядке:
    • a:hover должен идти после a:link и a:visited .
    • a:active должен идти после a:hover .
  • Для оформления ссылки можно применить множество свойств стиля CSS (например, фон CSS, цвет CSS, семейство шрифтов CSS, оформление текста CSS и т. д.).

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

Вот состояний , для которых вы можете изменить цвет ссылки с помощью CSS:

  • a:link – unvisited.
  • a:hover – при наведении на него указателя мыши.
  • а:активный — когда пользователь переходит по ссылке.
  • a:visited – посещенная ссылка.

В следующем примере у нас есть все четыре состояния ссылок с разными цветами:

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

Чтобы изменить цвет ссылки, значение CSS должно быть присвоено свойству стиля цвета. Существует несколько способов описания цветов. Вы можете использовать названия цветов, индикаторы RGB ( rgb() ) или индикаторы HEX ( #ffffff ).

В следующем примере ссылке CSS назначается цвет :

Я ссылка

Пример 

 a {
    цвет: зеленый;
}

Попробуйте вживую Узнайте на Udacity

Не упустите шанс опробовать нашу новую цветовую шкалу Pickeristic для настройки цветов ссылок CSS.

Совет: Pickeristic предоставляет вам RGB , HSLA индикаторы и другие коды цветов. Вы можете создать наборов цветов для своего проекта, генерировать цветов случайным образом и даже смешивать их.

Плюсы

  • Простой дизайн (без лишней информации)
  • Качественные курсы (даже бесплатные)
  • Разнообразие функций

3

Основные характеристики

007 Программы наноградусов

  • Подходит для предприятий
  • Платные сертификаты об окончании

    • ЭКСКЛЮЗИВ: СКИДКА 75%

    Плюсы

    • Удобная навигация
    • Нет технических проблем
      • 9040
    • Кажется, заботятся о своих пользователях 3 Основные характеристики

      • Огромное разнообразие курсов
      • 30-дневная политика возврата средств
      • Бесплатные сертификаты об окончании

      ОТ 12,99$

      Pros

      • Отличный пользовательский интерфейс
      • Предлагает качественный контент
      • Прозрачные цены

      Основные функции

      • Бесплатные сертификаты о прохождении обучения СКИДКА

        Оформление текста

        По умолчанию ссылки имеют подчеркиваний . Чтобы удалить подчеркивание ссылки с помощью CSS, используйте свойство оформления текста CSS.

        Имеет четыре возможных значения: подчеркнутый, надчеркнутый, зачеркнутый, и нет.

        В приведенном ниже примере CSS удаляет подчеркивание из ссылки, добавляя text-decoration:none; . Мы установили text-decoration значения для каждого состояний ссылки с помощью CSS: только активное и состояние наведения имеют подчеркивание:

        Пример 

         a:link {
    текстовое оформление: нет;
}

а: посетил {
    текстовое оформление: нет;
}

а: наведите {
    оформление текста: подчеркивание;
}

а: активный {
    оформление текста: подчеркивание;
}

        Попробуйте в прямом эфире Учитесь на Udacity

        Цвет фона

        Помимо настройки цвета ссылки в CSS, можно добавить свойство background-color.

        Я ссылка

        Пример 

         a:link {
    цвет фона: зеленый;
}

а: посетил {
    цвет фона: синий;
}

а: наведите {
    цвет фона: красный;
}

а: активный {
    цвет фона: розовый;
}

        Попробуйте Live Learn на Udacity

        Свойство похоже на цвет ссылки CSS. Вы также можете использовать те же индикаторы стоимости.

        Совет: обычно устанавливается цвет фона в состоянии наведения .

        Управление цветом ссылки с помощью CSS — это еще не все. Разработчики обычно используют ссылки в стиле как кнопок (например, для навигационного меню веб-сайтов).


         
        Вот свойства CSS , необходимые для стилизации кнопок или вкладок, ведущих к другим частям веб-сайта:

        • цвет — для установки цвета текста, представляющего ссылку
        • background-color — для добавления цветов к кнопке
        • padding – для определения размера кнопки
        • text-decoration — убрать подчеркивание у ссылок
        • text-align — установить выравнивание ссылок
        • display — для описания того, как должна отображаться ваша ссылка

        В этом примере мы объединяем эти свойства CSS для отображения ссылок в виде кнопок :

        Пример 

         a:link, a:visited {
    цвет фона: фиолетовый;
    граница: нет;
    цвет: #FFFFFF;
    отступ: 15px 32px;
    выравнивание текста: по центру;
    -webkit-transition-duration: 0,4 с;
    продолжительность перехода: 0,4 с;
    текстовое оформление: нет;
   размер шрифта: 16px;
   курсор: указатель;
   отображение: встроенный блок;
}

а: наведение, а: активный {
   цвет фона: #6D0062;
}

        Попробуйте вживую. Учитесь на Udacity

        Кроме того, вы можете использовать семейство шрифтов, размер шрифта, толщину шрифта и другие параметры, соответствующие вашему веб-дизайну.

        • Вы также можете стилизовать курсоры , добавив курсор: указатель в качестве одного из свойств.
        • Выбор цвета ссылки CSS зависит от общего дизайна веб-сайтов. Убедитесь, что измененные стили ссылок не усложняют поиск ссылок .

        HTML/CSS — Цвет ссылки при наведении

        Задавать вопрос

        спросил

        Изменено 7 лет, 2 месяца назад

        Просмотрено 16 тысяч раз

        Этот код написан в моем CSS; что делает все ссылки на моем сайте белыми, а при наведении на них они становятся серыми.

         a:ссылка {цвет: #FFFFFF}
а: активный {цвет: #383838}
a: посетил {цвет: #FFFFFF}
а: наведите {цвет: #383838}

        Вот часть моего сайта, на которой есть белые ссылки, которые становятся серыми при наведении курсора. У меня есть четыре разные ссылки на сайте, разделенные знаком «|». . Я пытаюсь сделать каждую ссылку ОСТАВАТЬСЯ белой, но менять цвет HTML всякий раз, когда на них наводят курсор… чтобы соответствовать нашему логотипу. (HTML-раздел кода с моими ссылками прикреплен ниже).

        Страница 1 | Страница 2 | Страница 3 | Страница 4

        Я был бы рад, если бы кто-нибудь помог мне найти очень простой способ заставить каждую ссылку, страницу 1, страницу 2, страницу 3 и страницу 4, менять разные цвета HTML при наведении на них курсора. По сути, правило или что-то, в котором говорится, что ссылка с именем Страница 1 должна быть окрашена в #C7C025 при наведении курсора… а ссылка с именем Страница 2 должна быть окрашена в цвет #950285 при наведении курсора и так далее…

        Большое спасибо заранее !!

        • html
        • css
        • цвета
        • наведение
        • шестнадцатеричный

        Дайте своим ссылкам ID:

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

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