角材料 md-button 悬停颜色变化 [英] Angular material md-button hover color change

问题描述

 
<md-button ng-click="$ctrl.widget.type = 'chart'; $ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == '图表'}"><md-icon md-menu-align-target md-svg-src="trending-up"></md-icon><label>{{'LABELS.CHART' |翻译}}</label></md-button><md-button ng-click="$ctrl.widget.type = 'card';$ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == '卡'}"><md-icon md-menu-align-target md-svg-src="info-white"></md-icon>{{'标签卡' |翻译}}</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' |翻译}}</md-button>
///css.selIcon {背景:#91a865；}.不活跃{.md-active-button:悬停{背景色:#91a865；}}

如您所见，我的按钮在点击时设置为绿色，不是通过 md-raised 而是通过简单的 css (.selIcon {背景:#91a865；}).唯一的问题是我想将悬停效果删除为灰色.一旦按钮被点击并在我悬停时变成绿色，它就会变成灰色.如何禁用此功能?另外，我可以将它包装在一个 div 中，以便禁用悬停仅影响此特定按钮

解决方案

你只需要定位 md-button 元素的类，也就是 .md-button并使用 css 更改 background-color.md-button 角材质的元素默认为灰色背景色.这是一个工作的plunker

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

解决方案

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-button 悬停颜色变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！