html - 在表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>

最后一列有标签和图像，但想隐藏文本文本应该只在悬停在图像上时显示，而且想要只有悬停列的功能图像不与其他列图像

没有显示悬停图像

当显示悬停文本 View 时

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