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

Question

我正在使用 table 来显示我的数据的一系列项目，每个数据都有一个操作列，并且在操作列上有图像我想隐藏图像并在将鼠标悬停在图像上时显示文本，副versa（显示图像和隐藏文本）没有悬停。

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

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

Show Text and Hide Image on hover column of table angular2

html

css

class

ng-style

angular