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