3

我试图创建一个马赛克，这很简单：

在此处输入图像描述

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

我找到了执行悬停部分的这段代码，（我对 CSS 很糟糕，抱歉）我怎样才能以简单的方式做到这一点？

更新 对不起各位误会。我认为智能手机没有该hover功能，因此用户在单击图像时会显示一个删除图像的按钮，然后如果他按下它，图像就会被删除，这就是我的意思。

4

3 回答 3

11

它可以在不使用 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/

于 2013-05-16T11:53:16.097 回答
2

该代码使用库 jquery。

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

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

我已经评论了悬停动作的部分，并添加了单击的部分，以及鼠标移出按钮时的另一部分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); 
    });
});

希望有帮助！！

于 2013-05-16T11:42:32.640 回答
0

在这种情况下，我不会使用按钮。在我看来，如果您使用这样的简单锚，它会看起来更好：

在此处输入图像描述

它可以出现在某个角落的悬停或mouseIn上，您可以通过使用不透明度过渡使用 CSS 来做到这一点。（mouseIn 时从 0 到 1）。

于 2013-05-16T11:38:38.487 回答