I am currently using a table to showcase a series of items for my data. Each data entry includes an action column with images. I would like to implement a feature where hovering over an image hides the image and reveals text, and vice versa (showing the image and hiding the text) without requiring a hover.
app.html
<tbody>
<tr *ngFor="let item of mf.data">
<td >{{item.Title}}</td>
<td>{{item.CustomerName}}</td>
<td>{{item.ModifiedDate | date}}</td>
<td>{{item.RegionId}},{{item.City}}{{item.Country}}</td>
<td>{{item.BidStatus}}</td>
<td>
<label class="col-text"><img src="../../../../assets/app-icons/view.png">View</label>
</td>
</tr>
</tbody>
The last column contains the label and image, but I want to hide the text. The text should only appear when hovering over the image. This functionality should apply specifically to the hovered image column and not affect other columns with images.
By default, the image is shown
When the user hovers over it, the text "View" will be displayed