im trying to on hover of a row the border top and bottom be blue color
but it dosent work
this is my css what am i missing ?
/*loader*/
.loader-box{
height: 80vh;
}
/*table*/
table {
width: 100%;
}
.mat-form-field {
font-size: 14px;
width:30%;
}
td, th {
width: 25%;
}
.mat-row .mat-cell {
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
cursor: pointer;
}
.mat-row:hover .mat-cell {
cursor: pointer;
color: blue;
border-color: blue;
}and this is my html
<div class="col-md-12 border">
<div class="text-end mx-1">
<mat-form-field appearance="standard">
<mat-label>Buscar</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ej. jugo" #input>
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- code Column -->
<ng-container matColumnDef="product_code">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Codigo </th>
<td mat-cell *matCellDef="let product"> {{product.product_code}} </td>
</ng-container>
<!-- name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Nombre </th>
<td mat-cell *matCellDef="let product"> {{product.name}} </td>
</ng-container>
<!-- price Column -->
<ng-container matColumnDef="price">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Precio </th>
<td mat-cell *matCellDef="let product"> {{product.price}}$ </td>
</ng-container>
<!-- stock Column -->
<ng-container matColumnDef="stock">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Inventario </th>
<td mat-cell *matCellDef="let product"> {{product.product_quantity}} </td>
</ng-container>
<!-- family Column-->
<ng-container matColumnDef="family">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Familia </th>
<td mat-cell *matCellDef="let product"> {{product.family.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="escribirow(row.id)"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No encontrado "{{input.value}}"</td>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 50]" aria-label="Select page of users"></mat-paginator>
</div>
</div>how can i solve this ? i want the both borders of the same color im new in front end development I'm probably forgetting some basic property or something about it, thanks for your help in advance.