将鼠标悬停在图像上时，会显示可点击图标

Question

当我将鼠标悬停在图片上方时，我必须在右上角显示small red clickable X。

理论上他们可以点击X然后它会处理一些工作，然后删除悬停在上面的图像。

我对CSS非常陌生，所以我没有真正的代码。

任何帮助都将不胜感激。

更新

继承我的理论：

• 我们添加了悬停背景，然后我们设置了红色图像的背景网址，然后以某种方式将其放在右上角。

这不对，我确实需要查看代码，因为我没有真正的技能。

Answer 1

这里有一个由我制作的片段。询问某些事情是否不够明确。

.img {
  height: 50px;
  width: 50px;
  background-color: yellow;
}

.x {
  color: black;
  width: 50px;
  height: 50px;
  display: none;
}

.img:hover>.x {
  display: block;
}

<div class="img">
  <div class="x">
    x
  </div>
</div>