如何在鼠标悬停在<img/>标签上方显示按钮？

Question

当鼠标光标越过它时，我想在另一个background-image标签上显示一个按钮（图像或带有<img>的div）。图像的宽度是固定的，但可以更改高度。

这方面的一个例子如下：

我怎么能用jQuery或纯JS做到这一点？

Answer 1

的CSS：

div {
    position: relative;
    bottom: 30px;
    left:50%;
    z-index:1000;
    opacity:0;
}

Jquery：

$("img").hover(function(){
    $("div").css("opacity",1);
},function(){
     $("div").css("opacity",0);
});  

自己完成剩下的工作。

好教程：http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

Answer 2

看看jQuery悬停方法。也许还有从屏幕外移动按钮到所需位置。您可以使用css z-index将对象定位在另一个对象之上。

Answer 3

为什么js在这里？

这很简单：css：

HTML：

<div class="image"><div class="inner"><button>Hello</button></div></div>​

CSS：

.image {
    background-image: url(http://placehold.it/350x150);
    width: 350px;
    height: 150px;
    position: relative;
}
​.image .inner {
 display:none;
 position: absolute;
 top: 60px;
 left: 100px;    
}
.image:hover .inner {
 display: block;   
}
​

DEMO

DEMO with transition

Answer 4

因为你提到你只想使用jquery ..

$('#buttonId').css("position", "absolute");
$('#buttonId').css("bottom","0");
$('#buttonId').css("cursor","hand");
$('#buttonId').css("cursor","pointer");
$('#buttonId').css("margin","0 auto");
$('#buttonId').parent().css("text-align","center");​​​​​​​​​​​​​

BTW，这里不需要a标签。如果你想要手形光标，那么使用cursor属性。