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

Разное 

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

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A. Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Цвет ссылок</title> <style> a { color: #0075B2; /* Цвет обычной ссылки */ text-decoration: none; /* Убираем подчёркивание у ссылок */ } a:visited { color: #8F8E8E; /* Цвет посещённой ссылки */ } a:hover { color: #CE242B; /* Цвет ссылки при наведении */ text-decoration: underline; /* Добавляем подчёркивание */ } </style> </head> <body> <p><a href=»#»>Cras ingens iterabimus aequor</a> — завтра снова мы выйдем в огромное море.</p> </body> </html>

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис.

 1). Заметьте, что псевдокласс :hover в коде идёт после :visited. Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.

Рис. 1. Вид ссылки при наведении

Аналогично можно поменять и цвет фона под ссылкой при наведении на неё, добавив свойство background к селектору a:hover, как показано в примере 2.

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Фон под ссылками</title> <style> a { color: #000080; /* Цвет обычной ссылки */ padding: 2px; /* Поля вокруг текста */ } a:hover { text-decoration: none; /* Убираем подчёркивание */ color: #FFFAC0; /* Цвет ссылки */ background: #AB4A9C; /* Цвет фона */ } </style> </head> <body> <p><a href=»#»>Audaces fortuna juvat</a> — счастье покровительствует смелым.</p> </body> </html>

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.

Рис. 2. Изменение цвета фона ссылки

Ссылки

См. также

  • :focus на мобильных устройствах
  • background
  • color
  • currentColor
  • Виды ссылок
  • Всплывающая подсказка
  • Единицы цвета в CSS
  • Использование :hover
  • Линейный градиент
  • Наследование в CSS
  • Несколько фоновых картинок
  • Нормальное позиционирование
  • Переходы с помощью :hover
  • Подсветка строк и колонок таблицы
  • Псевдокласс :hover
  • Псевдоклассы в CSS
  • Работа с типографикой
  • Селекторы CSS
  • Сочетание с псевдоклассами
  • Спрайты
  • Установка фона и градиента
  • Фоновая картинка

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 28. 09.2018

Редакторы: Влад Мержевич

javascript — При наведении курсора на ссылку меняется цвет фона блока

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

HTML

<div>
<img src="img/4.png" alt="">
<h4>Research</h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
<a href="#">READ MORE</a>
</div>

CSS

.services_bloc {
width: 370px;
background-color: #fff;
}
.button3 {
    border: 2px solid #212121;
    color: #212121;
    display: block;
    width: 150px;
    padding: 5px 0;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
}

  • javascript
  • css
  • hover

1

Отличная нетривиальная задачка. Дело в том, что средствами css никак нельзя повлиять на родительский элемент из дочернего (зеленый фон), и сложно повлиять на соседние (белый цвет текста). У меня получилось решить её, но применить пришлось немного css-магии )) Здесь сочетание трёх идей:

  1. При ховере на кнопку (а не на ее родителя!) должны перекрашиваться ее соседи (и родитель, но это позже) — используем оператор влияния на соседние теги. Но он работает только на те, что ниже по коду, а текст у нас выше кнопки…
  2. Значит используем флекс на родителе и
    перевернем порядок     — кнопка в коде идет первой, а отобразится последней, то что нужно!
  3. Повлиять на фон родительского блока из дочернего средствами css невозможно, но мы сделаем хитро — а не будем его менять вообще. Мы его перекроем. Пусть на ховер у кнопки возникает псевдоэлемент :after с нужным цветом фона, растянем его абсолютным позиционированием на всю карточку, положим под контент карточки z-index: -1 и уберем реакцию на ховер с него pointer-events: none;
  4. Готово )
. card {
  position: relative;
  width: 300px;
  margin: 20px auto;
  text-align: center;
  background-color: yellow;
}
.card__info {
  display: flex;
  position: relative;
  padding: 20px;
  flex-flow: column-reverse nowrap;
  z-index: 1;
}
.card__btn {
  display: block;
  width: 100px;
  margin: 20px auto 0;
  padding: 10px;
  border: 1px solid black;
  cursor: pointer;
}

.card__btn:hover {
  color: #fff;
  border-color: #fff;
}

.card__btn:hover ~ *{
  color: #fff;
}

.card__btn:hover:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: green;
  pointer-events: none;
  z-index: -1;
}
 
<div>
  <div>
    <a>Hover me!</a>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.  
      Odit expedita a voluptatum quibusdam veniam architecto in
      harum sunt ipsum dolore.
    </div>
  </div>
</div>

1

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

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

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

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

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

Почта

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

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

Почта

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

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

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

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

спросил

Изменено 6 лет, 9 месяцев назад

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

Этот код написан в моем 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:

  my-website09090909.
 а>
Страница 2

А затем используйте этот css:

 #page1:hover { color: red; }
#page2:hover {цвет: синий; }
/* ... */

1

Просто есть родительский элемент и в соответствии с вашим родительским элементом попробуйте ниже:

Просто попробуйте это:

И CSS: