Как изменить цвет при наведении?
Здравствуйте! Подскажите пожалуйста, как реализовать следующий блок(картинка)
<span>Ключевыми направлениями нашего бизнеса являются <a class="text-container1">стратегический брендинг</a> и разработка <a class="text-container"> digital проектов.</a></span> |
<span>Ключевыми направлениями нашего бизнеса являются <a class="text-container1">стратегический брендинг</a> и разработка <a class="text-container"> digital проектов.</a></span>
Дополнительно:
Ну это же элементарно...
.text-container1:hover { color: white; } |
.text-container1:hover { color: white; }
- Нет, нужно чтобы при наведении на тег ссылки, менялся цвет текста
Изначально весь текст белый,
А при наведении на ссылку, он меняется на серый - karinar, Интересно, а почему вы это сразу в вопросе не написали? Мы догадаться были должны?
- karinar, такое можно решить с помощью селектора :has, но учтите, что он полноценно заработал в FireFox только в декабре 2023 года, в остальных браузерах - раньше.
span { color: white; } span a { color: white; } span a:hover { color: white; } span:has(a:hover) { color: gray; }
span { color: white; } span a { color: white; } span a:hover { color: white; } span:has(a:hover) { color: gray; }
- Сергей delphinpro, всё было бы гораздо труднее, если бы нужно было подсветить например 2 слова, без вспомогательных тегов
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для изменения цвета при наведении на элемент веб-страницы, вы можете использовать CSS псевдокласс :hover. Этот псевдокласс позволяет задать стили, которые будут применяться к элементу при наведении курсора на него.
Для изменения цвета при наведении вам нужно добавить следующий код в блок стилей вашего HTML документа или во внешний CSS файл:
.element:hover { color: red; /* замените на нужный вам цвет */ }
Где .element - это класс или идентификатор вашего элемента, к которому нужно применить стили при наведении. Замените "color: red;" на нужный вам цвет или другие стили, которые вы хотите применить.
Если вы хотите изменить цвет фона элемента при наведении, то используйте свойство background-color вместо color:
.element:hover { background-color: blue; /* замените на нужный вам цвет фона */ }
Таким образом, вы сможете легко изменить цвет элемента при наведении курсора на него. Не забудьте проверить работоспособность изменений в различных браузерах для обеспечения кроссбраузерной совместимости.