Цвет текста при наведении css: Меняем цвет элемента по наведению мышки. Простой пример, простой CSS

Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный <div>тут ссылки<div>. У вас это тоже может быть созданный вами контейнер, или уже готовый (например, виджет в сайдбаре).

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше — делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

.catside a:hover {
background: #0078BF;
color: #fff;
}

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама «штука», позволяющая понять браузеру, что это нужно делать по наведению мышки — псевдокласс

Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом . catside. Далее мы добавили псевдокласс hover и оформили по правилам CSS.

Послесловие

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

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

Опять же о показанном примере: в нем не учитываются параметры оформления блока (отступы, размер шрифта, картинка и прочее). Это все можно узнать из моих предыдущих статей на блоге, либо воспользоваться консолью разработчика F12 в вашем браузере (как им пользоваться смотрите видео на моем канале YOUTUBE).

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

При наведении курсора на ссылку должен меняться цвет фона блока в котором находится ссылка.

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 — Изменение цвета текста при наведении

спросил

Изменено 1 год, 10 месяцев назад

Просмотрено 3к раз

Я пытаюсь изменить цвет текста на теге a . Внутри моего тега и у меня есть два отдельных класса span. Один, чтобы текст оставался черным, а другой, чтобы текст был серым. При наведении я хотел бы, чтобы оба этих цвета текста стали синими.

На данный момент при наведении курсора на мой тег a только первый текст span становится синим, но не тег span имеет css, чтобы текст был серым.

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

Вот пример моего кода:

 .gray-text {
  цвет: серый;
}
.gray-текст: наведите {
  цвет синий;
}
а: наведите {
  оформление текста: подчеркивание;
  цвет: синий!важно;
} 

 <дел>
Нажмите здесь  (подзаголовок)
 

Я попытался обойти это, применив :hover к моему классу grey-text , который дает мне вид, который я ищу, но только при наведении курсора на серый текст.

Ожидаемый результат при наведении Щелкните здесь (подзаголовок) весь текст становится синим.

• HTML
• CSS

1

я думаю, что это более интуитивно понятное решение. при наведении на тег a меняется цвет пролетов

 .серый текст {
  цвет: серый;
}
a: диапазон наведения {
  оформление текста: подчеркивание;
  цвет: синий!важно;
} 

 <дел>
Нажмите здесь (подзаголовок)
 

1

Это не работает, потому что .gray-text:hover соответствует только наведению курсора на сам текст, а не на ссылку. Чтобы это работало, вы можете сопоставить

 .gray-text {
  цвет: серый;
}
/* Изменить цвет ссылки */
а: наведите {
  оформление текста: подчеркивание;
  цвет: синий!важно;
}
/* Изменить цвет текста */
a: hover .gray-text {
  цвет синий;
}
 

Следует избегать использования флага !important (как и все остальные ответы), поскольку это может вызвать проблемы со специфичностью в будущем.

Из веб-документов Mozilla по специфичности:

Использование !important , однако, является плохой практикой и его следует избегать, потому что это усложняет отладку, нарушая естественное каскадирование в ваших таблицах стилей.

Лучшим решением было бы просто сделать весь текст синим при наведении якоря. !важный не нужен:

 .gray-text {
  цвет: серый;
}
а: наведите,
a: hover .gray-text {
  оформление текста: подчеркивание;
  цвет синий;
} 

 Нажмите здесь  (подзаголовок) 

Попробуйте это. Вы можете обновить цвет текста внутри тега span при наведении курсора на тег a .

 .серый текст {
  цвет: серый;
}
.gray-текст: наведите {
  цвет синий;
}
а: наведите {
  оформление текста: подчеркивание;
  цвет: синий!важно;
}
 
a: диапазон наведения {
    цвет синий;
} 

 <дел>
Нажмите здесь  (подзаголовок)
 

1

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Изменение цвета текста в div при наведении? — УСБ

спросил 7 лет, 3 месяца назад

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

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

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

 
 
ПОДРОБНЕЕ
 
 

CSS:

 .learnMore {
ширина: 140 пикселей;
высота: 35 пикселей;
граница: 1px сплошной фиолетовый;
поле:0 авто;
}
.learnMore:наведите {
цвет фона: фиолетовый;
белый цвет
}
 

Я понятия не имею, почему цвет:белый не изменит цвет. Любая помощь приветствуется!

• HTML
• CSS
• текст
• цвета

3

Похоже, вам не хватает точки с запятой после color:white, вы также можете рассмотреть настройки браузера по умолчанию для посещенных ссылок и т. д. Вот рабочая демонстрация: codepen demo

 .узнать больше {
  цвет фона: белый;
  ширина: 140 пикселей;
  высота: 35 пикселей;
  граница: 1px сплошной фиолетовый;
  поле:0 авто;
  цвет: фиолетовый;
}
. learnMore:наведите {
  цвет фона: фиолетовый;
  белый цвет;
}
 

3

Следует отметить, что h4 — это блочный элемент, а a — встроенный элемент. До HTML5 правильный способ структурировать это было бы с a , обернутым в h4 , например:

  
Подробнее 
 

С HTML5 теперь можно оборачивать блочные элементы в . Я бы сделал что-то вроде этого:

 
<стиль>
    a.learnMore {
      текстовое оформление: нет;
      преобразование текста: верхний регистр;
      цвет: фиолетовый;
    }
    a.learnMore h4 {
      граница: 1px сплошной фиолетовый;
      отступ: 10 пикселей;
      выравнивание текста: по центру;
    }
    a.learnMore h4: hover {
      цвет фона: фиолетовый;
      белый цвет;
    }


 
Подробнее
 
 

 a.