在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

要修改默认离子列表项的背景色，您需要将这些选择器与!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;
}

在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 4中，如果你想为你的整个应用定制，而不仅仅是一个特定的项目列表，你可以更新变量.scss，分别是ion-item标签/组件的CSS自定义属性。

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

否则，请附加ID或类名。ion-item#myid:hover或ion-item.myclass:hover
有关其他属性，请参见：https://ionicframework.com/docs/api/item#css-custom-properties
每个Ionic标签都有这些属性可以自定义。

• • 2020年7月10日**
• • Ionic 5/电容器**适合我：
• 超文本标记语言 *

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

• 中央支助组 *

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

对于最基本的方法，将其放在全局变量中。（将类item-hover添加到某个东西中...）

<ion-item class="item-hover">some thing...</ion-item>

ion-item.item-hover {
  cursor: pointer;
  &:hover {
    --background: #cccccc;
  }
}

最好总是使用一个自定义的实用程序类，以免影响其他方面，如表单输入 Package 器等。
干杯！