# Проблема с цветом иконок в заголовке при наведении мыши

**URL:** https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966
**Category:** Support
**Created:** [03.Февраль.2022 13:35:29 UTC](https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966 "2022-02-03T13:35:29Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [03.Февраль.2022 18:00:16 UTC](https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966/3 "2022-02-03T18:00:16Z")

</div>

Спасибо за ваш ответ!

По какой-то причине, похоже, что цвета были правильными (мой любимый светло-голубой) для нативных иконок в заголовке, но не для моих остальных иконок, установленных через [компонент темы](https://meta.discourse.org/t/custom-header-links-icons/86307).

Таким образом, светло-голубой цвет иконок «гамбургер» и поиска сработал, возможно, из-за их класса `.header-dropdown-toggle`.  
Компонент темы, который добавляет мои дополнительные иконки, также добавляет селектор `.custom-header-icon-link` на том же уровне, что и класс `.header-dropdown-toggle`.

Возможно, эти селекторы обеспечивают достаточную специфичность, чтобы переопределить любое правило, использующее `.discourse-no-touch`? Честно говоря, я не до конца понимаю, что именно происходит здесь в CSS.

Но ваша подсказка помогла мне рефакторить мой CSS. Вот результат:

```scss
.d-header-icons {
    .header-dropdown-toggle, .custom-header-icon-link {
        .icon {
            .d-icon {
                color: white;
            }
            &:hover, &:focus {
                background: white;
                .d-icon {
                    color: var(--tertiary-medium);
                }
            }
        }
        &.active .icon .d-icon {
            color: var(--tertiary-medium);
        }
    }
}

```

Это работает идеально, и я больше не использую `.discourse-no-touch`.

![chrome_Q7W3Tsm9BU](https://global.discourse-cdn.com/meta/original/3X/3/5/3526c52a8f5827f219bfd0735d8c6619028b0d6f.gif)

---

_[View the full topic](https://meta.discourse.org/t/header-icons-color-on-mouse-hovering-issue/216966)._