角材料md按钮悬停颜色变化 [英] Angular material md-button hover color change
问题描述
<div class="non-active" layout layout-align='space-around center'>
<md-button ng-click="$ctrl.widget.type = 'chart'; $ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == 'chart'}">
<md-icon md-menu-align-target md-svg-src="trending-up"></md-icon>
<label>{{'LABELS.CHART' | translate}}</label>
</md-button>
<md-button ng-click="$ctrl.widget.type = 'card';$ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == 'card'}">
<md-icon md-menu-align-target md-svg-src="info-white"></md-icon>
{{'LABELS.CARD' | translate}}
</md-button>
<md-button ng-click="$ctrl.widget.type = 'currentValue'; $ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == 'currentValue'}">
<md-icon md-menu-align-target md-svg-src="filter2"></md-icon>
{{'LABELS.CURRENTVAL' | translate}}
</md-button>
</div>
///csss
.selIcon {
background: #91a865;
}
.non-active{
.md-active-button:hover{
background-color: #91a865;
}
}
如您所见,单击时我的按钮设置为绿色,不是通过md引发的,而是通过简单的CSS(.selIcon { 背景:#91a865; }).唯一的问题是我想将悬停效果删除为灰色.单击该按钮后,当我将鼠标悬停时该按钮变为绿色.如何禁用此功能?另外,我可以将其包装在div中,以便将鼠标悬停禁用仅影响此特定按钮
as you can see, my button when clicked is set to green not by md-raised but by simple css (.selIcon { background: #91a865; }) . The only problem is I want to remove the hover effect to gray color. once the button is clicked and turned green when I hover it's going to gray. How do I disable this feature? also, can I wrap it inside a div so the hover disable only affect this particular button
推荐答案
您只需要定位md-button
元素的类.md-button
并使用CSS更改background-color
.默认情况下,棱角材质的md-button
元素具有灰色背景色.
这是一个工作正常的弹车
You only need to target the class of the md-button
element which is .md-button
and change the background-color
using css. md-button
element of angular material by default has the grey background color.
Here is a working plunker
这篇关于角材料md按钮悬停颜色变化的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!