Unable to remove on hover background colour from mat-chip

user_14117898 0
Viewed 3410

i need to remove the on hover background colour to transparent on hovering.

Price chip without hover

Price chip with hover

HTML :-

<div>
    <mat-chip-list>
       <mat-chip class="price-filter">Price <svg width="24" 
          height="24" viewBox="0 0 24 24" focusable="false" class=" 
          NMm5M"><path d="M7 10l5 5 5-5H7z"></path></svg> 
       </mat-chip>
    </mat-chip-list>
</div>

CSS :-

.price-filter{
border: solid;
border-color: #dad5d5;
border-width: thin;
background-color: transparent;
cursor:pointer;
color: var(--primary) !important;
}

.price-filter > mat-icon {
background-color: transparent;
opacity: 1;
}

.NMm5M {
fill: var(--primary) !important;
position: relative;
left: 11px;
}

.price-filter:hover{
background-color: transparent !important;
 }

i want to remove the grey colour on hover as shown in the screenshot in second link.

angular css html
2 Answers

Why simple don't change in the class price-filter the hover rule?

like:

.price-filter:hover{background-color:inherit!important;} // or want you want.

EDIT after see live version:

The problem is that code:

.mat-chip.mat-standard-chip::after {
    background: #0000;
}

if you change that to trasparent all work how you want.

user_124027320

This solved my problem

.mat-chip.mat-standard-chip::after {
  background: none !important;  // color that you want on hover
}
user_113619520
Related