如何显示按钮悬停在图像上方或按下它？

Question

我试图创建一个马赛克,它很简单:

delete当用户hover超过图像时我正在考虑显示按钮.但我的网站也响应,所以只悬停不起作用,我需要在用户点击图像上方时显示按钮.

我发现这个代码做了悬停部分,(我对CSS很糟糕,对不起)我怎么能以简单的方式做到这一点？

更新 抱歉误会的人.我认为智能手机没有这个hover功能,因此用户在点击图片时会显示一个删除图像的按钮,如果他按下它,图像就会被移除,这就是我的意思.

Answer 1

它可以在不使用javascript的情况下以更简单,更兼容的方式完成:

HTML:

<div class="show-image">
  <img src="http://i.imgur.com/egeVq.png" />
  <input class="the-buttons" type="button" value=" Click " />
</div>

CSS:

div.show-image
  {
  position: relative;
  float:left;
  margin:5px;
  }

div.show-image:hover input
  {
  display: block;
  }

div.show-image input
  {
  position:absolute;
  top:0;
  left:0;
  display:none;
  }

小提琴:http://jsfiddle.net/jvX9u/211/