时间戳

首页 > 解决方案 > 无法从 mat-chip 中删除悬停背景颜色

html - 无法从 mat-chip 中删除悬停背景颜色

问题描述

我需要将悬停背景颜色删除为悬停时透明。

没有悬停的价格筹码

悬停价格筹码

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

我想删除悬停时的灰色，如第二个链接中的屏幕截图所示。

标签： htmlcssangular

解决方案

为什么简单的不改变类price-filter中的悬停规则？

像：

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

看到现场版本后编辑：

问题是代码：

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

如果您将其更改为透明，则所有工作都按您的意愿进行。

推荐阅读