顯示文本和隱藏圖像上的懸停列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; 
    } 
}