0

我导入了一个 nz-date-picker，我想在鼠标悬停并关注日期选择器元素时更改边框颜色和框阴影颜色，我在元素的 css 类中更改了颜色，但不起作用

我在我的组件中导入 ng-zorro-antd 模块，nz-date-picker 工作正常，然后我打开 F12 找到 nz-date-picker 元素的类，并在我的组件 scss 文件中覆盖它，但它没有工作，我覆盖 .ant-calendar-picker 和 .ant-calendar-picker-input，不工作。也许我覆盖了错误的类，但 .ant-calendar-picker 和 .ant-calendar-picker-input 是我可以在 F12 开发工具控制台上找到的。

我的scss代码：

:host ::ng-deep {
  .ant-calendar-picker {
    .ant-calendar-picker-input {
      &:hover,
      &:focus {
        border-color: $primary-red;
        box-shadow: none;

      }
    }

  }
}

或像这样：

:host ::ng-deep {
  .ant-calendar-picker {
      &:hover,
      &:focus {
        border-color: $primary-red;
        box-shadow: none;

      }

  }
}

我可以在 chrome element 控制台上看到我的 css 代码确实退出了，但我不知道为什么它不起作用

这是有效的，但没有帮助：

.ant-input {
  &:hover {
    border-color: $primary-red;
  }

  &:focus {
    border-color: $primary-red;
    box-shadow: none;
  }
}

我希望当鼠标悬停并专注于 nz-date-picker 元素时边框颜色和框阴影颜色可以改变 在此处输入图像描述

4

1 回答 1

0

如果您想在将鼠标悬停在元素上时更改 Css，首先该元素必须具有此样式，然后在悬停时更改它。例如：

.foo{
    border:1px solid red;
}

接着

.foo:hover{
    border:1px solid green;
}
于 2019-04-10T05:53:51.117 回答