CSS3 div悬停显示删除图标，无javascript，纯CSS3

<div class="container">
  <div class="content">内容</div>
  <div class="delete-icon"></div>
</div>

.container {
  position: relative;
}

.delete-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-image: url("删除图标的URL");
  background-size: cover;
  opacity: 0;
  transition: opacity 0.3s;
}

.container:hover .delete-icon {
  opacity: 1;
}