Html 在表angular2的悬停列上显示文本并隐藏图像

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

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>

{{item.Title}
{{item.CustomerName}
{{item.ModifiedDate}
{{item.RegionId}，{{item.City}{{item.Country}
{{item.BidStatus}
看法

最后一列有标签以及图像，但想要隐藏文本。只有当将鼠标悬停在图像上时，文本才应该显示，并且只想使用悬停的列图像而不想使用其他列图像的功能

显示不带悬停的图像

当显示悬停文本时，查看 这很简单。。。 更新html添加

span

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

---

你试过什么吗？是的，我试过mouseover事件并使用了ng if，但它隐藏/显示所有图像扫描你共享的工作代码？或图像，以便我们能够正确理解您需要的内容。好的，等等，我将附带示例。因此，您希望仅在悬停图像时显示文本（视图）？仅css而非内置css的SCS语言应用程序？：）/无论如何，复制SCS并在线编译。

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

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

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