时间戳

首页 > 解决方案 > Ionic 4 中的 CSS 自定义属性：背景悬停

css - Ionic 4 中的 CSS 自定义属性：背景悬停

问题描述

我正在尝试更改离子列表中离子项目悬停时的背景颜色。在离子 4 中工作。

我用 *ngFor="let ...." 建立了一个列表。在这个里面，我放了我的离子物品。该列表完美运行。但我不明白为什么只有一些 ionic 提供的 CSS 自定义属性有效。例如，我不能让 --background-hover 做任何事情。

有关 ion-item，请参阅 ionic 文档页面。这显示了 css 自定义属性的完整列表：https ://ionicframework.com/docs/api/item 。

在 .html 文件中：

<ion-list>
  <ion-item  *ngFor="let item of animateItems; let i = index;">
     [-- contents of item --]
  </ion-item>
</ion-list>

在 .scss 文件中，这似乎不起作用。

ion-item {
    --background-hover: #cccccc;
}

但是，这确实有效：

ion-item {
    --background: #eeeeee;
}

根据我对 --background-hover CSS 属性的理解，我希望当我将鼠标悬停在 ion-item 上时它会变成灰色。任何人都知道我错了什么，或者为什么这不能按照离子文档工作。

标签： cssionic4theming

解决方案

要添加到 Truyen 的答案，如果您将 button="true" 属性添加到：

<ion-item button="true">...</ion-item>

然后悬停变量实际生效。

推荐阅读