Блог

мне нужно удалить цвет фона при наведении курсора мыши до прозрачного при наведении курсора мыши.

Ценовой чип без наведения курсора мыши

Ценовой чип при наведении курсора мыши

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

я хочу удалить серый цвет при наведении курсора мыши, как показано на скриншоте во второй ссылке.

Почему simple не изменяет в классе price-filter правило наведения курсора?

Нравится:

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

ОТРЕДАКТИРУЙТЕ после просмотра живой версии:

Проблема в том, что код:

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

если вы измените это на прозрачный, все будет работать так, как вы хотите.

Это решило мою проблему

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