Angular Material MD-Button 鼠标悬停颜色变化

Question

 <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-raised，而是通过简单的CSS (.selIcon {background: #91a865;})。唯一的问题是，我想要删除鼠标悬停时的灰色效果。一旦按钮被点击并变成绿色，当我将鼠标悬停在上面时它会变成灰色。如何禁用这个功能？还有，我能否将其包装在一个div中，以便仅禁用此特定按钮的悬停效果。

- jsPlayer

---

悬停时的预期行为是什么？ - Jos

当按钮被点击时，它会变成绿色，或者说一旦被点击后就没有悬停效果，然后变成绿色。选择绿色来显示按钮已被选中。请保持绿色。 - jsPlayer

你能否在代码编辑器（plunker、codepen或jsfiddle）中重现这个问题，并在此处分享链接？ - Nehal

使用 md-no-ink 和 ng-class。 - nextt1

你需要根据应用的类别覆盖元素的:hover，例如md-button.active:hover和md-button.in-active:hover。 - Jos

Answer 1

您只需要针对 md-button 元素的类进行定位，该类为 .md-button，并使用 CSS 更改 background-color。Angular Material 的 md-button 元素默认具有灰色背景颜色。 这里是一个可工作的 Plunker 示例

- Frederick Eze