Question

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

这就是我的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;
}

边框颜色类型有效，但它只突出显示项目的左边框，上边框和右边框，而不是底部边框。悬停时背景颜色根本不会改变。是否有可能离子项中的href标签禁用CSS？如果我删除href标签，它可以正常工作。

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

Answer 1

使用href上的ion-item属性会生成以下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;
}

设置边框的样式比较复杂，因为列表元素具有不同的边距，具体取决于列表中的位置（first，last或other）。可以对抗这种情况，但是当一个人徘徊时它会推动相邻元素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中，这是使用--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 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标签都具有要自定义的这些属性。

Answer 5

2020年10月7日

Ionic 5 /电容器对我有用：

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中悬停时更改离子列表项的背景颜色

5 个答案: