鼠标悬停时标题图标颜色问题

[Canapin (Coin-coin le Canapin)]

你好！

长时间以来，在我用自定义颜色（浅蓝色）覆盖之后，网站上的图标悬停时仍然会变成灰色：

这是因为 Discourse 的 CSS：

.discourse-no-touch .d-header-icons .icon:hover .d-icon, .discourse-no-touch .d-header-icons .icon:focus .d-icon {
    color: #919191;
}

浅蓝色一开始是有效的，我认为是在 Discourse 升级后它就失效了，我大概一年都没有关注这个问题。

然后，我最近升级到了 2.9.0 版本（我每次界面提示升级时都会升级，有时会更频繁一些），之前设置的自定义颜色神奇地回来了：magic_wand:

然而，我现在注意到灰色又回来了

我可能在此期间又升级了一次 Discourse。
无论如何，我不知道为什么正确的颜色又回来又消失了，因为我没有编辑过我的论坛 CSS。

所以，这是当前的 CSS 规则顺序：

我想要回我的浅蓝色。

我当前的自定义 CSS：

.d-header-icons .d-icon {
    color: white;
}
.d-header-icons .icon:hover, .d-header-icons .icon:focus {
    background: white;
}
.d-header-icons .icon:hover .d-icon, .d-header-icons .icon:focus .d-icon {
    color: var(--tertiary-medium);
}
.drop-down-mode .d-header-icons .active .icon .d-icon {
    color: var(--tertiary);
}

我宁愿不使用 !important，如果可以避免的话，而且我经常难以简单地覆盖 Discourse 的 CSS，因为父类 .discourse-no-touch 需要我创建一个真正的火车 选择器链来实现我的目标。

1. 有什么想法可以解释为什么我的颜色覆盖在几天内又生效了，然后又失效了？

2. 如何正确地覆盖 Discourse 的类，以及这个讨厌的曾祖父类 .discourse-no-touch？

---

注意：蓝色在智能手机上是有效的。有没有一个简单的目标规则可以使 CSS 更改同时影响触摸和非触摸设备？

[Don]

你好，

这有点棘手，但我也在我自己的网站上使用类似的东西，所以这可能对你也有用。

通用

// 标题按钮

.d-header-icons {
  .icon {
    &:hover,
    &:focus,
    &:active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
    .discourse-no-touch &:hover,
    .discourse-no-touch &:focus {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
  }
  .d-icon {
    color: #fff;
  }
  .header-dropdown-toggle {
    &:hover {
      background: #fff;
    }
    &.active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
      &:hover {
        background: #fff;
        .d-icon {
          color: var(--tertiary-medium);
        }
      }
    }
  }
}

.drop-down-mode .d-header-icons .active .icon .d-icon {
  color: var(--tertiary);
}

[Canapin (Coin-coin le Canapin)]

感谢您的回复！

不知何故，原生标题图标的颜色（我喜欢的浅蓝色）似乎是正确的，但我的其他图标（由 主题组件 设置）却不是。

所以，汉堡包和搜索图标的浅蓝色工作正常，也许是因为它们的 .header-dropdown-toggle 类。
添加我的附加图标的主题组件也在 .header-dropdown-toggle 类相同的级别添加了 .custom-header-icon-link 选择器。

也许这些选择器提供了足够的精度来覆盖任何使用 .discourse-no-touch 的规则？老实说，我不太明白 CSS 中发生的一切。

但您的建议帮助我重构了 CSS。这是结果：

.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。