Html 当鼠标悬停在文本上时，如何防止文本更改？

我有这个：

.mat-header-cell mat-checkbox {
  padding-top: 1px;
  padding-left: -10px;
  margin-bottom: 1px;
  display:table;
}

.mat-header-cell:hover mat-checkbox {
  padding-top: 1px;
  padding-left: -10px;
  padding-bottom: 10px;
  display: table;
}

这是html：

    <ng-container matColumnDef="projects">
        <th mat-header-cell *matHeaderCellDef (mouseover)="show = true" (mouseout)="show = false" mat-sort-header i18n>
          <div class="mat-checkbox-project">
            <div class="mat-checkbox-label">
              <div class="row" *ngFor="let item of returnProjectCodes; let i = index">
                <mat-checkbox
                  (click)="$event.stopPropagation()"
                  (change)="filterProjects($event, i, item)"
                  [checked]="selected === i"
                  >{{ item.name }}
                </mat-checkbox>
              </div>
            </div>
          </div>
          <div class="mat-sort-header-button-project">Project</div>
        </th>

        <td mat-cell *matCellDef="let row">{{ row.projects }}</td>
      </ng-container>

{{item.name}
项目
{{row.projects}}

但是当我将鼠标悬停在项目列标题上时，项目列会向下跳一点。所以它会与复选框发生冲突

但我想要的是，当您将鼠标悬停在列标题上时，布局不会改变

那怎么做呢

---

谢谢

因为您在hover中添加了

边距底部

属性，所以样式肯定会改变。移除

悬停

css或移除

填充底部：10px并替换回
页边距底部：1px处于悬停状态
由于在悬停状态中添加了边距底部属性，因此样式肯定会更改。移除悬停css或移除填充底部：10px；并更换回页边距底部：1px；处于悬停状态。