Эффект наведения на ион-предмет без роутераLink - PullRequest
Новая
       9

Эффект наведения на ион-предмет без роутераLink

0 голосов
/ 10 июля 2020

Это боковое меню в веб-приложении Ioni c. 

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

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

Здесь мне нужно создать эффект наведения. Но это не работает. Ключевым моментом здесь является то, что вы можете видеть, что я не использую здесь routerLink. Итак, как я могу это сделать?

Я пробовал это. Но не работает. 

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

1 Ответ

4 голосов
/ 10 июля 2020

Если вы прочтете документацию, вы увидите, что ваш атрибут «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;
}
...