没有 routerLink 的 ion-item 的悬停效果

Question

这是 Ionic 网络应用程序的侧边菜单。

    <ion-content>
            <ion-list>
    
              <ion-menu-toggle autoHide="false" *ngFor="let p of appPages; let i = index">
    
    
                <ion-item (click)="selectedIndex = I" 
[class.selected]="selectedIndex == i" tappable (click)="goToPage(p)">
    
                  <ion-icon slot="start" [name]="p.ionicIcon? p.ionicIcon: ''"></ion-icon>
                  <ion-label>
                    {{p.title}}
                  </ion-label>
    
                </ion-item>
    
              </ion-menu-toggle>
    
            </ion-list>
          </ion-content>
    
        </ion-menu>

文档：https://ionicframework.com/docs/api/item#css-custom-properties

这里我需要给出一个悬停效果。但它不起作用。这里的关键是你可以看到我在这里不使用routerLink。那我该怎么做呢？

我已经试过了。但不工作。

ion-item:hover {
  --background-hover: gray !important;
}

Answer 1

如果您通读文档，您会发现您的“tappable”属性不再有效。

您需要做的就是在离子项目上设置button="true"。

<ion-item button="true">
  My Item
</ion-item>

https://codepen.io/mhartington/pen/KKVemNx?editors=1000

同样值得注意...

您不需要在元素上使用:hover 选择器。应该只是

ion-item {
  --background-hover: gray;
}