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

Question

I have this:

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

And this is 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>

But when I hovering over the project column header the project column will jump little bit down. So that it collide with the checkboxes.

But what I want is that when you hover over the column header the layout will not change.

So how to do that?

Thank you

Answer 1

Since you have added margin-bottom property in hover, the style will definitely change. Either remove the hover css or remove the padding-bottom: 10px; and replace back the margin-bottom: 1px; in hover state