如何在悬停状态下更改“角度材质"按钮的背景颜色? [英] How can I change Angular Material button background color on hover state?

问题描述

我有一个Angular按钮:

I have an Angular button:

<button md-button class="link-btn" >Cancel</button>

.link-btn {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  font-size: 0.8em;
  padding: 0px;
}

.link-btn:hover {
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  font-size: 0.8em;
  padding: 0px;
}

通常设置透明背景，但是在hover状态下显示灰色背景?如何删除它?

Normally it is setting transparent background, but in hover state, gray background is shown? How to remove that?

推荐答案

从Angular 6开始，在所选解决方案中使用/deep/或ng-deep是文档中所述的全局样式

As of Angular 6, the use of /deep/ or ng-deep in the chosen solution is marked for deprecation. The recommended way is to use global styles as stated in the docs.

某些Angular Material组件，特别是基于覆盖的组件，例如 MatDialog，MatSnackbar等不作为您的子代存在 成分.通常，它们被注入到DOM中的其他位置.这是 重要的是要牢记，因为即使使用高特异性和 穿刺阴影选择器不会定位非直接元素 您组件的子代.建议使用全局样式 定位此类组件.

Some Angular Material components, specifically overlay-based ones like MatDialog, MatSnackbar, etc., do not exist as children of your component. Often they are injected elsewhere in the DOM. This is important to keep in mind, since even using high specificity and shadow-piercing selectors will not target elements that are not direct children of your component. Global styles are recommended for targeting such components.

在按钮悬停背景的特定情况下，我必须在我的styles.css(通过angular-cli包含或直接链接到index.html的全局样式表)中使用以下代码.请注意，根据按钮中使用的调色板类型(color ="primary"或color ="accent"或color ="warn")，您可能必须用accent或warn替换primary.

In the specific case of button hover background, I had to use the following code in my styles.css (global stylesheet included via angular-cli or directly linked in index.html). Note that you might have to replace primary with accent or warn depending on the palette type (color="primary" or color="accent" or color="warn") used in the button.

.mat-button.mat-primary .mat-button-focus-overlay {
  background-color: transparent;
}

如果您不希望每个按钮都受影响，那么最好设置一个特定的类，例如无悬停效果，如下所示.

If you don't want every button to be affected, it's better to have a specific class like no-hover-effect as shown below.

.no-hover-effect.mat-button.mat-primary .mat-button-focus-overlay,
.no-hover-effect.mat-button.mat-accent .mat-button-focus-overlay,
.no-hover-effect.mat-button.mat-warn .mat-button-focus-overlay
{
  background-color: transparent;
}

对于不需要悬停效果的每个实质按钮，您都需要

For every material button that doesn't need hover-effect, you'd do

  <button mat-button color="primary" class="no-hover-effect">
    No Hover Button
  </button>

这篇关于如何在悬停状态下更改“角度材质"按钮的背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！