单击时更改离子按钮文本颜色

Question

与我的离子按钮发生了一些争执。我想针对特殊情况定制它，以便：

1. 当配置为链接时，一目了然。
2. 当用户悬停时，会出现彩色下划线。
3. 当用户点击时，没有波纹，但文本会改变颜色。

我有1和2要工作。并让涟漪消失。但我无法在激活时更改文本颜色！

      // Link
      &.clear {

        // Hover
        &:hover {
          text-decoration: underline;  // Adds an underline
          text-decoration-color: var(--ion-color-secondary, #02c3e8);  // Set the underline color to secondary
          text-underline-offset: 5px;
          text-underline-width: 1.5px;
        }
        --background-hover-opacity: 0.0 !important; // don't want background to show on hover

        // Activated
        --color-activated: var(--ion-color-secondary, #02c3e8) !important; // text color when activated
        --background-activated-opacity: 0.0 !important; // remove background - md ripple still appears
        --ripple-color: var(--app-bg);
      }

Answer 1

要在按钮激活时更改文本颜色，可以使用 :active 伪类。

// Link
&.clear {
  // Activated
  &:active {
    color: var(--ion-color-secondary, #02c3e8) !important;
  }
}