CSS 悬停时更改 Ionic 列表项的背景颜色

Question

我正在为移动网络应用程序使用 Ionic 框架。我试图在悬停时更改 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 标签，它可以正常工作。

我在网上寻求帮助，但没有找到解决此问题的方法或解释。任何帮助表示赞赏。谢谢

Answer 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

Answer 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;
}

Answer 3

在 Ionic 4 中，更新变量。scss 分别是离子项 tag/component 的 CSS 自定义属性 - 如果您希望它针对您的整个应用程序进行定制，而不仅仅是一个特定的项目列表。否则附加一个 id 或 class 名称。

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

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

有关其他属性，请参阅：https://ionicframework.com/docs/api/item#css-custom-properties

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

Answer 4

在 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
    }
  }
}

希望对您有所帮助！

Answer 5

10-07-2020

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);
}

CSS 悬停时更改 Ionic 列表项的背景颜色

Changing background color of Ionic list item on hover in CSS

html

css

angularjs

ionic-framework