0

これがリンクです

「TUI Exclusive Offering」の下にある 4 つの画像ボックスにマウスを合わせると、質問のタイトルに記載されている効果が得られます。

html :

<div class="maindiv">
<img src="img/img.jpg" />


<div class="lower_div">

this is the lower div1<br>
this is the lower div2<br>
this is the lower div3<br>
this is the lower div4<br>
this is the lower div5<br>
this is the lower div6<br>
</div>
</div>

一番下に座らせる方法lower_divは、その位置を作りabsolute、bottom 0. しかし、何らかの理由で私の大きな html ページでは、このスニペットのみを含む別の html ページでは機能しますが、この手法は機能しません。

だから私はdivを一番下に置く別の方法を探しています。さらに、マウスホバーで完全に表示する必要もあります。

それらを達成する方法は？

4

3 に答える 3

1

これはあなたを助けるかもしれません。

脚本

 $(function(){
    $(".maindiv").hover(function(){
        $(this).children('.lowerdiv').stop().animate({top:0})
    },function() {
            $(this).children('.lowerdiv').stop()..animate({top:150})
        })
 })​

HTML

<div class="maindiv">
    Main div content
    <div class="lowerdiv">
        lowediv content
    </div>
</div>
<div class="maindiv">
    Main div content
    <div class="lowerdiv">
        lowediv content
    </div>
</div>

CSS

    .maindiv{
    height:200px;
    width:200px;
    background:#CCC;
    position:relative;
    overflow:hidden;
    float:left;
    margin:10px;
}
.lowerdiv{
    height:200px;
    width:200px;
    background:#797987;
    position:absolute;
    top:150px;
}​

jsfiddle - http://jsfiddle.net/tRYTq/4/

于 2012-08-15T09:51:35.790 に答える
1

これが実際のデモです: http://jsfiddle.net/qbyeC/

jQuery が関係している場合、javascript は単純です。各 maindiv の mouseenter と mouseleave を定義するだけです。

$('.maindiv').on({
    mouseenter : function(e){
        $(this).children('.lowerdiv').stop(true,false);                    
        $(this).children('.lowerdiv').animate({top:0,marginTop:0});
    },
    mouseleave : function(e){
        $(this).children('.lowerdiv').stop(true,false);
        $(this).children('.lowerdiv').animate({top:'100%',marginTop:'-40px'});
    }
});​

これにより、lowerdiv クラスがチェックされ、各イベントの正しい位置にアニメーション化されます。注: mouseleave の 2 行目の marginTop は、lowerdiv クラスの margin-top css プロパティと一致する必要があります。これは、マウスが要素の上にないときに div を突き出す量です。

css は好みに合わせて変更する必要がありますが、重要な部分は次のとおりです。

.maindiv {
    overflow:hidden;
    position:relative;
}
.lowerdiv {
    position:absolute;
    width:100%;
    bottom:0px;
    top:100%;
    margin-top:-40px;
}

maindivに一致するようにlower-divをlowerdivに変更したことを除いて、htmlコードはあなたの言い方です。

于 2012-08-15T09:36:51.643 に答える
0

負の位置が必要です（tuiページで行ったように）、次のようなものから始めます

position:absolute;
bottom:-20px;

収まるまで試してみてください。

jquery を使用すると、次のようなことができます。

$('.maindiv').hover(
  function () {
    $(this).find('.lower_div').stop(true, false).animate({'bottom':0});
  },
  function () {
    $(this).find('.lower_div').stop(true, false).animate({'bottom':-20});
  }
);

http://api.jquery.com/hover/

もちろん、この方法では、最適な開始位置を見つけようとしている間、css と js の元の位置 (-20) を常に変更する必要があります。アニメーションが開始する前に original_position を保存することで、これをよりエレガントに行うことができますが、それはおそらくここまで進んでいますか? 私はスタックオーバーフローにかなり慣れていません

于 2012-08-15T09:37:31.643 に答える