Hover effect on ion-item without routerLink

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