在悬停按钮时删除背景色css
在悬停按钮时删除背景色css
提问于 2020-05-14 23:02:46
我使用的是angular和html。
在上面的图像中，你可以看到第一个图标，在悬停时出现了一些背景颜色。
我试过了
.sidemenuitm {
padding: 10px 5px;
cursor: pointer;
text-align: center;
}
.lineheight {
line-height: 13px;
}
.btn-change {
border-right: #b41414 3px solid;
}
.selectedmenu {
background-color: #fafafa;
color: black;
border-left: solid rgb(214, 208, 208) 1px;
border-top: solid rgb(214, 208, 208) 1px;
border-bottom: solid rgb(214, 208, 208) 1px;
}
.backupicon {
width: 85px;
white-space: normal;
font-size: 12px;
line-height: 1.5;
display: flex;
justify-content: center;
}
button:hover {
background-color: transparent;
text-decoration: none;
}<div *ngIf="element.id=='3'" class="sidemenuitm lineheight" [routerLink]="element.url" routerLinkActive="selectedmenu btn-change" [matTooltip]="menuname ? element.tooltip : ''" matTooltipPosition="right" [matTooltipClass]="'tooltipwidth'">
<button mat-button [disabled]="is_accessible" class="backupicon" (click)="selectcomp(i)">
<mat-icon class="material-icons-outlined">{{element.iconname}}</mat-icon>
<div *ngIf="menuname">{{element.name}}</div>
</button>
</div>
但没那么走运
有人能帮我吗？
回答 2
Stack Overflow用户
发布于 2020-05-14 23:23:12
请按照以下步骤操作
<button class="button" (mouseenter)="buttonHover = true" (mouseleave)="buttonHover = false" [ngclass]="(buttonHover)? 'hover' : '' '> ... </button>将变量添加到ButtonComponent.ts
export class BasicComponent{
buttonHover = false;
...
}如下所示更新CSS
button {
background: coral;
}
.button.hover {
background: transparent;
}Stack Overflow用户
发布于 2020-05-14 23:09:46
.button {
background-color: red;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover{
background-color: green;
}<a href="#" class="button">Link Button</a>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61800693
复制相关文章
相似问题
腾讯云开发者
