0

position:absolute親と子に対して行うことで div の上に divをスタックする方法は知ってposition:relativeいますが、別の div から div を「上昇」させるにはどうすればよいですか? 私が達成したいことの例はこちらです。一番下までスクロールし、アートワークの上にマウスを置きます。

4

4 に答える 4

2

できることは、相対位置のボックスにポップアップする絶対位置です。次に例を示します。

<div class="featured-image">
  <div class="caption">
    <p>This is where your text goes</p>
  </div>
</div>

これで、スクロールしない限りキャプションを非表示にすることができます。したがって、CSS だけでこれを行う簡単な方法は次のとおりです。

.featured-image { position:relative; width:300px; height: 400px; }
.caption { position:absolute; bottom:0; display:none; }
.feature-image:hover > .caption { display:block; }

最後の行は、マウスを画像の上に置くと表示されます。

その後、jQuery で簡単にアニメーション化できます。それは彼らが使用しているもののようです。

$(document).ready(function(e) {
$(".caption").hide();
});
var show = function() {
    $(".caption", this).stop(true, true).show(500)
};
var hide = function() {
    $(".caption", this).stop(true, true).hide(500);
};  
    $(".featured-image").hover(show, hide);
于 2013-02-28T04:20:15.133 に答える
1

HTMl

<div id="pic">
    <div>

    </div>
</div>

CSS

#pic {
    position: relative;
    background: yellow;
    width: 100px;
    height: 100px;
    overflow: hidden;
}

#pic div {
    position: absolute;
    bottom: -50px;
    background: black;
    height: 50px;
    width: 100px;

}

JQuery

$('#pic').hover(
    function(){
        $(this).find('div').stop(true, true).animate({
            'bottom': '+=50'
        }, 100);
    },
    function(){
        $(this).find('div').stop(true, true).animate({
            'bottom': '-=50'
        }, 100);
    }
);

jsfiddle: http://jsfiddle.net/Z6eLa/2/

于 2013-02-28T04:28:54.557 に答える
0

そのために JS は必要ありません。css3 トランジションを使用するだけです。

于 2013-02-28T14:10:09.470 に答える
0

jQuery と z-index について自己紹介します。

http://api.jquery.com/slideDown/

ここでの秘訣は、slidedown が一番上の div を下にスライドさせることです。私の頭に浮かぶ唯一のことは、その下部のdivを拡大する代わりに、反対のことをすることです. 一番上の div を取得してスライドアップし、その後ろに他の div を表示します。下部の div が「スライドアップ」したように見えるはずです。

これが機能しない場合は申し訳ありません。私はあなたがそれを完全にではなく半分だけ上にスライドさせることができるかどうかは実際にはわかりません...しかし頑張ってください！

于 2013-02-28T04:16:58.473 に答える