-4

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

一个例子如下：

在此处查看图片。

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

4

4 回答 4

1

CSS：

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

查询： 

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

剩下的自己解决。

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

于 2012-12-15T11:25:01.160 回答
0

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

于 2012-12-15T11:24:24.647 回答
0

为什么在这里 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;   
}
​

演示

带过渡的演示

于 2012-12-15T11:29:16.250 回答
0

因为您提到您只想使用 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属性。

于 2012-12-15T11:42:27.680 回答