Я только что создал учетную запись на этом форуме после поиска ответа, поэтому, пожалуйста, простите меня, если мне не хватает правильного форматирования или рекомендаций при публикации. Кроме того, я новичок в HTML.
Я работаю над личным веб-сайтом. У меня есть заголовок, содержимое которого показано ниже:
Код: Выделить всё
[url=#home]Home[/url]
[url=#about]About[/url]
[url=#projects]Projects[/url]
[url=#contact]Contact[/url]
На моем веб-сайте есть четыре раздела с чередующимися цветами фона (светлый, темный, светлый, темный). Поскольку заголовок вверху фиксирован, я хотел добиться эффекта, при котором цвет текста и границы внизу сливаются с цветом текущего фона (если фон светлый, элементы должны быть темными и наоборот). наоборот). Я использовал mix-blend-mode:different; в .nav-header, который работает как чудо для элементов. Однако у меня есть эффект наведения, который меняет цвет текста на зеленый. В результате смешивания, когда элементы темные, светлый текст приобретает фиолетовый цвет (поскольку он считается отличием от исходного зеленого цвета).
css
Код: Выделить всё
.nav-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-height: 6rem;
padding: 1rem 4rem 1rem 4rem;
border-bottom: 2px solid #E1E1E1;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
background: transparent;
backdrop-filter: blur(10px);
mix-blend-mode: difference;
}
- Я попробовал настроить смесь-смесь -mode для элемента, а также эффект наведения, но это не работает:
Код: Выделить всё
.nav-header a:hover {
color: #6A9955;
mix-blend-mode: normal;
}
- Я пытался использовать свойство изоляции для элементов, но это тоже бесполезно.
Как я могу игнорировать/удалять настройку режима смешивания на родительском элементе, чтобы сохранить эффект изменения цвета при наведении на дочерний элемент?< /strong> Спасибо за помощь и внимание.
Подробнее здесь:
https://stackoverflow.com/questions/790 ... ent-in-css
Мобильная версия