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 回答