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

我试图创建一个马赛克，它非常简单：

当用户将

鼠标悬停在图像上方时，我正在考虑显示
删除
按钮。
但是我的网站也有响应性，所以只悬停是不行的，我需要在用户点击图片上方时显示按钮

我找到了悬停部分（对不起，我对CSS很糟糕）
我怎样才能用一种简单的方式做到这一点

更新
抱歉误会了，伙计们。我认为，智能手机没有悬停功能，因此用户在点击图像时，会显示一个删除图像的按钮，然后如果他按下按钮，图像就会被删除，这就是我的意思。
在这种情况下，我不会使用按钮。在我看来，如果你使用这样一个简单的锚，它看起来会更好：


它可以出现在某个角落的悬停或鼠标输入上，您可以使用CSS通过不透明度转换来实现这一点。（鼠标输入时从0到1）。
该代码使用库jquery

对于click事件，可以使用jquery的.click方法

我更新了同一示例的代码。看看它：

我已经评论了悬停动作的部分，并添加了单击部分，以及鼠标离开按钮时的mouseout部分

代码如下：

jQuery(function() {    
    jQuery(".the-buttons").hide();
    /*jQuery('.show-image').hover(function() {
         jQuery(this).find('.the-buttons').fadeIn(1500);
    }, function() {
        jQuery(this).find('.the-buttons').fadeOut(1500); 
    });*/

    jQuery('.show-image').click(function() {
         jQuery(this).find('.the-buttons').fadeIn(1500);
    }, function() {
        jQuery(this).find('.the-buttons').fadeOut(1500); 
    });

    jQuery('.show-image').mouseout(function() {
        jQuery(this).find('.the-buttons').fadeOut(1500); 
    });
});

希望有帮助
 无需使用javascript，即可以更简单、更兼容的方式完成：

HTML:

小提琴手：
不太清楚你的意思。仅使用CSS就可以很容易地在悬停的图像上显示一个“按钮”。但是这个按钮是用来做什么的呢？你说的“图像上方的clck”是什么意思？很抱歉误解了。我认为，智能手机没有悬停功能，因此用户在点击图像时，会显示一个删除图像的按钮，然后如果他按下按钮，图像就会被删除，这就是我的意思。除了移动问题，在鼠标悬停时使用操作按钮的问题在于，在鼠标悬停之前，您不知道自己可以执行该操作，而用户可能永远不会悬停。所以我建议有一个永久可见的“按钮”，比如说在图像的底部，有半透明的背景，或者如果这不合适，就直接放在图像下面。@ralph.m，这是我从一开始的第一个方法，我会再试一次。我真的不理解在图像上方单击的
位，如果你解释得更好，我可以更新我的代码。对不起，弗兰克。我认为，智能手机没有悬停功能，因此用户在点击图像时，会显示一个删除图像的按钮，然后如果他按下按钮，图像就会被删除，这就是我的意思。谢谢你，弗兰克，这完全符合我的需要！但是，如果您希望使用只能通过javascript实现的单击功能。很高兴能帮上忙，而且很管用。你能告诉我怎么做吗？我喜欢你的建议。
<div class="show-image">
  <img src="http://i.imgur.com/egeVq.png" />
  <input class="the-buttons" type="button" value=" Click " />
</div>

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