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>

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)
});
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 に答える