How to hover ion-card inside ion-list - css

Question

I have an ion-list which have a button and card inside it, now I want to change the color of the button and card on hover but can't find a way to do it.
Here is my code. Thanks in advance
Html
<div [hidden] = hidden >
<ion-list>
<ion-card >
<button inset = true *ngFor="let item of items" (click)="open($event, item.name)" >
<ion-card>
<h2> <b>{{ item.name }} </b> </h2>
<p> Recommended for</p>
{{item.Description}}
</ion-card>
<br>
<br>
</button>
</ion-card>
</ion-list>
</div>
CSS
ion-card{
display: flex;
flex-direction: column;
width: 100% !important;
margin: 0 !important;
background-color:white;
box-shadow: none;
}
button.item:hover a{
background-color: slategray;
box-shadow: inset 0px 0px 0px 1px red;
}

Answer 1

First of all u can't hover on device but u can attach click events for that u need to use ngStyle in ur components to change color or show if its clicked.
<div [hidden] = hidden >
<ion-list *ngFor="let item of items">
<ion-card >
<ion-button (click)="open($event, item.name)" fill="clear" >
<ion-icon slot="icon-only" [name]="buttonIcon" [ngStyle]="{'color':color1}"></ion-icon>
</ion-button>
<ion-card>
<h2> <b>{{ item.name }} </b> </h2>
<p> Recommended for</p>
{{item.Description}}
</ion-card>
<br>
<br>
</button>
</ion-card>
</ion-list>
</div>
inside ur TS
buttonIcon: string = "md-add";
color1: string = "black";
open(event,item){
this.buttonIcon = "done-all"; // icon change name if u want to change icon too
this.color1 ="red"; // any color u want it to change to
//rest of your code
}
U can use the same ngstyle on ur ion card as well to change color.
U can also use ion-ripple-effect to show some sort of click feedback on cards.