[英]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;
}
}
as you can see, my button when clicked is set to green not by md-raised but by simple css (.selIcon { background: #91a865; }) . 正如你所看到的,点击时我的按钮设置为绿色而不是md-raised,而是简单的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
另外,我可以将它包装在div中,因此悬停禁用仅影响此特定按钮
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
元素的类,即.md-button
并使用css更改background-color
。 md-button
element of angular material by default has the grey background color. 默认情况下,角度材质的
md-button
元素具有灰色背景颜色。 Here is a working plunker 这是一个工作的plunker
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.