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

Question

我尝试创建马赛克，这非常简单：

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

我找到了悬停部分的this code，（我对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/

Answer 2

该代码使用库jquery。

对于点击事件，您可以使用jquery的.click方法。

我更新了同一个例子的代码。看看：http://jsfiddle.net/jvX9u/209/

我评论了悬停动作的部分，并添加了部分点击，以及当鼠标离开按钮时鼠标输出的另一部分。

这是代码：

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

希望有所帮助!!

Answer 3

在这种情况下，我不会使用按钮。我看到它的方式，如果你使用这样一个简单的锚点会更好看：

它可以出现在某些角落的悬停或 mouseIn 中，您可以使用不透明度过渡来使用CSS。 （当mouseIn时从0到1。）