javascript 如何显示按钮悬停在图像上方或按下它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16586104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How show button hovering above an image or pressing over it?
提问by Valter Silva
I trying to create a mosaic, it's very simple :
我试图创建一个马赛克，它很简单：
I was thinking in show the deletebutton when the user hoverover the image.
But my website it's responsive too, so to hover only wouldn't work, I need to show the button when the user click above the image too.
我正在考虑delete当用户hover在图像上时显示按钮。但是我的网站也是响应式的，因此仅悬停是行不通的，当用户单击图像上方时，我也需要显示该按钮。
I found this codewhich do the hover part, (I'm terrible with CSS, sorry) How can I do that in a simple way ?
我找到了执行悬停部分的代码，（我对 CSS 很糟糕，抱歉）我怎样才能以简单的方式做到这一点？
UpdateSorry for the misunderstanding guys. Smartphones, I think, don't have the hoverfunctionality, so the user, when click in the image, a button to remove the image would show, then if he press it, the image would be removed, that's what I meant.
更新对不起，误会的家伙。智能手机，我认为，没有这个hover功能，所以用户，当点击图像时，会显示一个删除图像的按钮，然后如果他按下它，图像就会被删除，这就是我的意思。
回答by Francisco Presencia
It can be done in a simpler and more compatible way without using javascript:
它可以在不使用 javascript 的情况下以更简单、更兼容的方式完成：
HTML:
HTML：
<div class="show-image">
<img src="http://i.imgur.com/egeVq.png" />
<input class="the-buttons" type="button" value=" Click " />
</div>
CSS:
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;
}
Fiddle: http://jsfiddle.net/jvX9u/211/
回答by Daniel Garcia Sanchez
that code uses the library jquery.
该代码使用库 jquery。
For click event, you can use .click method of jquery.
对于单击事件，您可以使用 jquery 的 .click 方法。
I updated the code of the same example. Look it: http://jsfiddle.net/jvX9u/209/
我更新了同一个例子的代码。看看吧：http: //jsfiddle.net/jvX9u/209/
I've commented the part of hover action, and added the part of click, and another part of mouseout for when the mouse out of the button.
我已经评论了悬停动作的部分，并添加了点击的部分，以及鼠标离开按钮时的鼠标移出的另一部分。
This is the code:
这是代码：
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);
});
});
Hope that helps!!
希望有帮助！！
回答by SAiNT
I wouldn't go with button in this case. the way i see it, it would look much better if you used a simple anchor like this:
在这种情况下，我不会选择按钮。在我看来，如果您使用像这样的简单锚点，它看起来会好得多：
it can appear on hoveror mouseInin some corner, you can do this with CSS by using the opacity transition. (from 0 to 1 when mouseIn).
它可以出现在某个角落的悬停或mouseIn上，您可以使用 CSS 使用不透明度过渡来实现。（mouseIn 时从 0 到 1）。
