Hover effect on ion-item without routerLink

Issue

This is a side menu on the Ionic web app.

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

Doc: https://ionicframework.com/docs/api/item#css-custom-properties

Here I need to give a Hover effect. But it is not working. Key thing here is you can see that I do not use routerLink here. So how can I do that?

I have tried this. But not working.

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

Solution

If you read through the docs, you'll see your "tappable" attribute is no long valid.

All you need to do is set button="true" on the ion-item.

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

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

Also worth noting...

You do not need to use the :hover selector on the element. It should just be

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

Answered By - mhartington