1

我遇到了我想尝试的这种幻灯片效果。基本上是将一个 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>

查询：

$(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)
});
4

2 回答 2

1

在 jQuery 部分——从第 7 行开始，代码在 jQuery onReady 之外——它使用 jQuery。其余的似乎还可以。

于 2012-08-21T15:31:41.543 回答
1

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

padding-top: 150px;

它将文本推到框下方。

我在下面的小提琴中对其进行了评论，它出现了。

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

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

于 2012-08-21T15:38:47.583 回答