如何在鼠标悬停时在 <img> 标签上显示按钮？答案

【问题标题】：How can I show a button over an <img> tag on mousing over it?如何在鼠标悬停时在 <img> 标签上显示按钮？
【发布时间】：2012-12-17 00:26:41
【问题描述】：

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

一个例子如下：

如何使用 jQuery 或纯 JS 做到这一点？

【问题讨论】：

见stackoverflow.com/questions/1149516/…

标签： javascript jquery html css

【解决方案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/

【讨论】：

谢谢。这就是我需要的。抱歉，我无法评价你的回答，因为我的声誉是

【解决方案2】：

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

【讨论】：

【解决方案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

【讨论】：

>> 为什么 js 在这里？因为有很多不同的图像，我无法为所有图像生成不同的背景。达曼帮助了我。
为什么需要生成不同的背景？您可以将背景设置为样式。什么问题......你也可以用同样的方式使用图像标签和相对div

【解决方案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");

顺便说一句，这里不需要a 标签。如果您想要手形光标，请使用 cursor 属性。

【讨论】：