显示文本和隐藏图像上的悬停列angular2

Question

我正在使用表来显示我的数据的一系列项目，每个数据都有一个操作列，并且在操作列上有图像我想隐藏图像并在悬停时显示文本在图像上，反之亦然（显示图像并隐藏文字）而不悬停。

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> 

的最后一栏标签，也是形象，但要隐藏文本的文本应该只显示在悬停在图像加上想只用功能悬空列图像不与其他列图像

没有悬停图像显示

当悬停文字查看显示

Answer 1

这很简单... 更新HTML添加span

<label class="col-text"><img src="../../../../assets/app-icons/view.png"><span>View<span></label> 

新增CSS/SCSS

.col-text { 
    span { 
    display: none; 
    } 
} 

.col-text:hover { 
    img { 
    display: none; 
    } 

    span { 
    display: inline-block; // or block etc; 
    } 
}