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

Question

我有这个：

.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>

但是当我将鼠标悬停在项目栏上时 header 项目栏会向下跳一点。这样它就会与复选框发生碰撞。

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

那么怎么做呢？

谢谢

Answer 1

既然你在hover中添加了margin-bottom 属性，样式肯定会变的。删除 hover css 或删除 padding-bottom: 10px; 并在悬停状态

中替换回 margin-bottom: 1px;

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

How to prevent text changes when hovering with mouse over text?

html

css

mousehover

angular