Можно ли изменить цвет элемента при наведении курсора мыши с html на Angular?
Цвет кнопки передается компоненту в виде строки и должен использоваться в стилях кнопок. Мне удалось настроить цвет фона и границы, но я не могу изменить цвет метки при наведении на нее курсора. Я нашел частичное решение, но оно также меняет и другие кнопки:
@for (button of toast.buttons; track button){
<button
[ngStyle] = "hovered === 1 ? {'background-color': button.color, 'border-color':button.color, 'color':button.color} : {'background-color': button.color, 'border-color':button.color, 'color':'#fff'}"
(mouseover) = "hovered = 1"
(mouseout) = "hovered = -1"
(click) = "close()"
class = "modal-button">
{{button.text}}
</button>
}
Здесь я попробовал изменить цвет текста при наведении с помощью mouseover и mouseout, но это привело к следующему результату: Без наведения:
При наведении:
Как видите, при наведении курсора на одну кнопку вторая тоже окрашивается.
Я пытался искать решения в интернете, но ничего вразумительного не нашел. Подскажите, есть ли способ избежать такого результата? Например, передача значения переменной button.color в файл CSS или иная обработка наведения.
🤔 А знаете ли вы, что...
С CSS можно легко встраивать и стилизовать шрифты на веб-странице с помощью @font-face.
Ответ:
Вы можете добиться этого с помощью чистого CSS и :hover . Вы можете использовать CSS-переменные для внедрения цвета в CSS.
.modal-button {
background-color: var(--modal-button-color);
border-color: var(--modal-button-color);
color: #fff;
}
.modal-button:hover {
color: var(--modal-button-color);
}
Шаблон:
@for (button of toast.buttons; track button){
<button
[style.--modal-button-color] = "button.color"
(click) = "close()"
class = "modal-button">
{{button.text}}
</button>
}