我试图创建一个马赛克,这很简单:
当用户在图像上时,我正在考虑显示delete
按钮。hover
但是我的网站也是响应式的,所以只悬停是行不通的,当用户点击图片上方时,我也需要显示按钮。
我找到了执行悬停部分的这段代码,(我对 CSS 很糟糕,抱歉)我怎样才能以简单的方式做到这一点?
更新
对不起各位误会。我认为智能手机没有该hover
功能,因此用户在单击图像时会显示一个删除图像的按钮,然后如果他按下它,图像就会被删除,这就是我的意思。
我试图创建一个马赛克,这很简单:
当用户在图像上时,我正在考虑显示delete
按钮。hover
但是我的网站也是响应式的,所以只悬停是行不通的,当用户点击图片上方时,我也需要显示按钮。
我找到了执行悬停部分的这段代码,(我对 CSS 很糟糕,抱歉)我怎样才能以简单的方式做到这一点?
更新
对不起各位误会。我认为智能手机没有该hover
功能,因此用户在单击图像时会显示一个删除图像的按钮,然后如果他按下它,图像就会被删除,这就是我的意思。
它可以在不使用 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/
该代码使用库 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);
});
});
希望有帮助!!
在这种情况下,我不会使用按钮。在我看来,如果您使用这样的简单锚,它会看起来更好:
它可以出现在某个角落的悬停或mouseIn上,您可以通过使用不透明度过渡使用 CSS 来做到这一点。(mouseIn 时从 0 到 1)。