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

我想创建一个马赛克，这是非常简单的：如何将按钮悬停在图像上方或按下它？

enter image description here

我在表演想着delete按钮，当用户hover在图像上。但是我的网站也很敏感，所以只能悬停才行，我需要在用户点击图片时显示按钮。

我发现this code哪个做悬停部分，（我对CSS很抱歉，很抱歉）我该如何以简单的方式做到这一点？

更新对不起，误解的家伙。我认为智能手机没有hover的功能，所以当用户点击图片时，会出现一个按钮来删除图片，然后如果按下它，图片将被删除，这就是我的意思。

来源

2013-05-16 Valter Silva

这不是真的明确你的意思。单独使用CSS悬停时，很容易在图像上出现“按钮”。但按钮是什么？你是什么意思“克服形象”？ –

对不起，误会。我认为智能手机没有“悬停”功能，因此用户在点击图像时会显示一个按钮来移除图像，如果按下它，图像将被删除，这就是我的意思。 –

除了移动的问题，具有悬停动作按钮的问题是，你不知道，你可以采取行动，直到你徘徊，用户可能无法永远徘徊。所以我建议有一个“按钮”永久可见，说在图像的底部，有一个半透明的背景或者如果这是不服从，然后将图像直属。 –

它可以在一个更简单，更兼容的方式来完成，无需使用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-16 11:53:16

我真的不明白'点击image'位以上，如果你解释它更好，我可以更新我的代码。 –

不好意思误解弗兰克。我认为智能手机没有“悬停”功能，因此用户在点击图像时会显示一个按钮来移除图像，如果按下它，图像将被删除，这就是我的意思。 –

谢谢弗兰克，它适用于我所需要的！ –

在这种情况下，我不会去按钮。我看到它的方式，它看起来好多了，如果你用一个简单的锚是这样的：

enter image description here

它可以在一些角落悬停或mouseIn出现，你可以用CSS做通过使用不透明度转换。（mouseIn时从0到1）。

来源

2013-05-16 11:38:38 SAiNT

你能告诉我怎么做，请吗？我喜欢你的建议。 –

该代码使用库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); 
    }); 
});

希望帮助！

来源

2013-05-16 11:42:32

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

回答

相关问题