在 CSS 中悬停时更改 Ionic 列表项的背景颜色答案

【问题标题】：Changing background color of Ionic list item on hover in CSS在 CSS 中悬停时更改 Ionic 列表项的背景颜色
【发布时间】：2020-07-11 01:09:08
【问题描述】：

我正在将 Ionic 框架用于移动 Web 应用程序。我正在尝试更改悬停时 Ionic 列表项的背景颜色，但它不会改变。

这是我的 html 中的内容：

        <ion-list>
            <ion-item ng-repeat="item in items" href="#/newpage">               
                <div>{{item.color}}</div>                       
            </ion-item>
        </ion-list>

这是 CSS 中的内容：

ion-item:hover {

    background-color: red;
    border-color: red;
}

边框颜色有点作用，但它只突出显示项目的左、上和右边框，而不是下边框。悬停时背景颜色根本不会改变。 ion-item 中的 href 标签是否有可能禁用 CSS？如果我删除 href 标签，它工作正常。

我已在网上寻求帮助，但我在哪里找不到此问题的解决方案或解释。任何帮助表示赞赏。谢谢。

【问题讨论】：

标签： html angularjs css ionic-framework

【解决方案1】：

在ion-item 上使用href 属性将生成以下HTML（为了清楚起见，去掉了一些属性）：

<ion-item href="#/newpage">
  <a ng-href="#/newpage" target="_self" href="#/newpage">
    <div class="ng-binding">Something</div>
  </a>
</ion-item>

您需要更改a 元素的背景颜色：

ion-item.item:hover a {
  background-color: slategray;
}

请注意，.item 部分用于赋予选择器更高的特异性。否则将使用 .item 的默认背景颜色。

也可以用!important解决，但我更喜欢前者：

ion-item:hover a {
  background-color: slategray !important;
}

设置边框样式比较棘手，因为列表元素根据列表中的位置（第一个、最后一个或其他）具有不同的边距。可以解决这个问题，但是当一个元素悬停时，它会将相邻元素推 1px。或许也可以解决这个问题，但可能需要一堆新的 CSS。

另一种解决方案是使用插入框阴影：

ion-item.item:hover a {
  background-color: slategray;
  box-shadow: inset 0px 0px 0px 1px red;
}

演示： http://plnkr.co/edit/TCRbWhIQ6xJRx2qrgExs?p=preview

【讨论】：

【解决方案2】：

要修改默认离子列表项的背景颜色，您需要将这些选择器与 !important 一起使用，这还取决于您是否使用 href 属性

href:

改变普通物品的颜色

 .item-complex .item-content, .item{
    background-color: #d8dfe6 !important;
}

悬停时

.item-complex .item-content:hover{
    background-color: red !important;
}

没有href：

改变普通物品的颜色

 .item{
    background-color: #d8dfe6 !important;
}

悬停时

.item:hover{
    background-color: red !important;
}

【讨论】：

【解决方案3】：

在 Ionic 4 中，使用 --background-hover css 变量对我有用。

#css
:host {
  ion-item:hover { 
    --background-hover: #000000 #color of choice 
  }
}

#scss
:host {
  ion-item {
    &:hover {
      --background-hover: #000000 #color of choice
    }
  }
}

希望这会有所帮助！

【讨论】：

这是 Ionic 所有新（er|est）版本（当前为 v6.x）的正确答案。

【解决方案4】：

在 Ionic 4 中，会更新变量。scss 分别是 ion-item 标签/组件的 CSS 自定义属性 - 如果您希望它为您的整个应用程序定制，而不仅仅是一个特定的项目列表。否则附加一个 id 或类名。

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

否则附加一个 id 或类名。 ion-item#myid:hover 或 ion-item.myclass:hover

其他属性见：https://ionicframework.com/docs/api/item#css-custom-properties

每个 Ionic 标签都有这些属性可以自定义。

【讨论】：

【解决方案5】：

2020 年 10 月 7 日

Ionic 5 / Capacitor这对我有用：

html

<ion-menu-toggle autoHide="false" *ngFor="let p of appPages; let i = index">

        <ion-item (click)="selectedIndex = i" [class.selected]="selectedIndex == i" button="true"
          (click)="goToPage(p)" class="my-hover">

          <ion-icon slot="start" [name]="p.ionicIcon? p.ionicIcon: ''"></ion-icon>
          <ion-label>
            {{p.title}}
          </ion-label>

        </ion-item>

      </ion-menu-toggle>

css

ion-item {
  --background-hover: var(--ion-color-primary);
}

【讨论】：