没有routerLink的离子项目的悬停效果

Question

这是 Ionic Web 应用程序上的侧边菜单。

    <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 上设置。

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

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

还有值得注意的...

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

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