Question

我遇到了我想尝试的幻灯片效果。基本上是将div放在另一个具有黑暗背景的div上。当我将鼠标悬停在图像上时...只是边界变暗了。图像上没有显示任何文字或任何内容。你能看出有什么东西看起来没什么问题吗？

CSS：

#container {
 width:400px;
 height:150px;
 position:relative;
 overflow:hidden;
 z-index:0;
 margin:0 auto;
 background-image:url(../images/slide-bg.png);
 border:10px solid #414141;
}

#container:hover {
 border-color:#303030;
}

#overlay {
 background-color:#000;
 display:block;
 position:absolute;
 top:0;
 left:0;
 width:400px;
 height:150px;
 z-index:1;
}

#hover {
 width:400px;
 display:block;
 height:100px;
 position:absolute;
 z-index:3;
 padding:25px;
 background-color:#1e1e1e;
 padding-top:150px;
 font-size:11px;
 font-family:Arial, Helvetica, sans-serif;
}

#hover p {
 color:#fff;
 font-weight:normal;
}

HTML：

<div id="container">
    <div id="overlay">
    </div>
    <div id="hover">
        Some Text here????
    </div>
</div>

Jquery的：

$(document).ready(function () {
    var colour = $("#overlay");
    var content = $("#hover");
    content.hide();
    colour.hide();
});

$("#container").hover(function() {
    content.show().css({ "left" : "-400px" }).animate({left : 0}, 300);
    colour.stop().fadeTo(500, .7)
},function() {
    content.animate({left : 400}, 300);
    colour.stop().fadeTo(500, 0)
});

Answer 1

在jQuery部分 - 从第7行开始，代码在jQuery onReady之外 - 它使用jQuery。其余的似乎没问题。

Answer 2

它在你的CSS中..这是因为你有

padding-top: 150px;

将文本方式推到框下方。

我在下面的小提琴中评论它并且它出现了。

您还想将.hover代码放在$(document).ready函数

中

http://jsfiddle.net/wirey00/vCe6N/

jQuery幻灯片效果与背景

2 个答案: