悬停按钮时文字移动

Question

我正在使用Angular Material来构建应用程序。我想使用mat-stroked-button，但是遇到了问题。正如您在下面的gif中看到的那样，每当我将鼠标悬停在按钮上时，所有文本都会快速下移然后上移。我不知道为什么会这样。

这是HTML：

<div id="home">
  <div id="side">
    <div id="info">
      <h1>{{title}}</h1>
      Info here
    </div>
    <div id="navigation">
      <button mat-stroked-button *ngFor="let item of menuItems">{{item}}</button>
    </div>
  </div>
  <div id="content">
    <button mat-stroked-button>BUTTON</button>
    <router-outlet></router-outlet>
  </div>
</div>

app.component.css：

#home{
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    width: 99%;
    height: 98%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
#side{
    width: 25%;
    height: 100%;
    display:flex;
    flex-direction: column;

}
#info{
    background: brown;
    margin-bottom: 10px;
    border: 1px solid black;
}
#navigation{
    background: brown;
    border: 1px solid black;
}

#info h1 {
    margin: 0;
    text-align: center;
}
#content{
    width: 100%;
    height: 100%;
    background: gray;
}
button[mat-stroked-button]{
    display: block;
    width: 80%;
    margin: auto;
    margin-bottom: 5px;
    margin-top: 5px;
}

styles.css：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

body, html, #home{
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
}
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

我已经在stackblitz上复制了该问题：https://stackblitz.com/edit/angular-sfbd5v

谢谢。

Answer 1

尝试为按钮添加您的替代样式以使鼠标悬停

button[mat-stroked-button], button[mat-stroked-button]:hover {

Answer 2

在app/appcomponent.css中，删除translate属性，然后尝试以下代码。它将阻止元素跳来跳去。

#home{
  position: absolute;
  display: flex;
  top: 2%;
  left: 2%;
  margin: auto;
  width: 95%;
  height: 95%;
}