0

私は、他の2つの を含むdivを含むを持っています:divdiv

<div class="container">
    <div class="overlay">
        <div class="title">Some title</div>
        <div class="description">Some description</div>
    </div>
</div>

私のCSS：

div.container {
    width: 220px;
    height: 160px;
    display: inline-block;
    position: relative;
}

div.container div.overlay {
    margin: 0;
    position: absolute;
    bottom: 0px;
    width: 220px;
    padding: 0;
}

これは、他の無関係な CSS と組み合わせて、2 番目の図に示されているものを作成します。ここで、デフォルトで最初の画像のようにするために、他の CSS を作成する必要があります。マウスを の上に置く.containerと、.descriptionがスライドして 2 番目の図のようになります。

ここに画像の説明を入力 ここに画像の説明を入力

すべてを配置して説明をスライドさせる方法がわかりません。できますか?

この質問は、配置と、説明をスライドさせるために必要な jQuery についてのみです。色やその他のレイアウトは問題ではありません。すべての主要なブラウザーで互換性のあるソリューションを探しています。

編集：

.titleまたはの高さがわからないことを忘れていました-高さはそこにあるテキストに依存するため、に.description設定されています。auto

4

4 に答える 4

1

これは、純粋な css 3 で実行できます。

から に高さを遷移させることはできないため、0代わりに次autoを使用します。max-height

.description  {
    max-height: 0;
    transition: 2s;
    overflow:hidden;
}

div.container div.overlay:hover .description {
  max-height: 160px;
}

純粋なCSSソリューション: http://jsfiddle.net/DkAKt/1/

この解決策は、説明の高さがわからなくても機能します。

CSS 3 トランジションには Internet Explorer 10 以降が必要です: http://caniuse.com/#search=transitions。ただし、古いバージョンはアニメーションなしでも動作します。

IE 8-9 でアニメーションなしでは生きられない場合は、javascript を使用する必要があります。

jQuery(function($){
  $(".container").on('mouseenter', function(){
    $(".description", this).stop(1,1).slideDown();  
  }).on('mouseleave', function(){
    $(".description", this).stop(1,1).slideUp();  
  })
  .find('.description').slideUp(0);
});

純粋なjQueryソリューション: http://jsfiddle.net/DkAKt/2/

于 2013-02-26T16:58:41.080 に答える
1

解決策は説明の高さを知ることに依存するため、これを行うには Javascript が必要です。jQuery について言及しましたが、そのコードは次のとおりです。

$(function slideDescriptionOnHover(){
    $('.container').each(function adjustOverlayPosition(){
        var $overlay     = $(this).find('.overlay');
        var $description = $(this).find('.description');

        function slideUp(){
            $overlay.animate('bottom', 0);
        };

        function slideDown(){
            $overlay.animate('bottom', -$description.height());
        };

        $(this).hover(slideUp,slideDown);

        $overlay.css('margin-bottom', -$description.height());
    });
});

効果をアニメーション化する必要があると想定しました。そうでない場合は、animateメソッドをに置き換えcssます。

何が起こっているかについての簡単なガイド：

  1. それぞれについて.container(それぞれに含まれるテキストの量に応じて、高さの説明が異なる場合があります)…</li>
  2. .overlayアニメーション化する と、.description高さがアニメーション化する方法を決定するの変数をバインドします。
  3. 2 つの関数をbottom定義し0ます。もう 1 つは、ダウンの底を の高さだけ引っ張ります。.overlay.container.overlay.description
  4. これら 2 つの関数を jQuery hover メソッド ( と のエイリアス) にバインドしmouseoverますmouseout。
  5. …そして最後に、最初に説明が非表示になっていることを確認してください。

div.container次のプロパティが含まれるように、 のルールを調整する必要もあります。

overflow: hidden
于 2013-02-26T16:56:54.503 に答える
0

純粋なCSSソリューションの場合、.overlaydivを少し下に移動する必要があります。

bottom:-30px;。

次に、その部分を表示したくないので、に追加overflow:hidden;し.containerます。

さて、あなたがそれにカーソルを合わせるとき、あなたはそれを上げる必要があります。

.overlay:hover
{
    bottom:0;
}

今それをより美しくして、使用してtransitionください。

.overlay
{
     bottom:-30px;
     -webkit-transition:bottom 2s;
        -moz-transition:bottom 2s;
          -o-transition:bottom 2s;
             transition:bottom 2s;
}
.overlay:hover
{
    bottom:0;
}
于 2013-02-26T16:51:07.377 に答える
0

これは非常に簡単なはずです。次のCSSを追加してください。

div.container {
    overflow:hidden;
}

div.overlay {
    bottom:-30px;
    -webkit-transition:bottom 500ms;
    -moz-transition:bottom 500ms;
    -o-transition:bottom 500ms;
    transition:bottom 500ms;
}

div.description {
    height:30px;
}

div.container:hover > div.overlay {
    bottom:0;
}

それはそれをする必要があります。そうでない場合は、セレクターを削除します。具体的すぎる可能性があります。

于 2013-02-26T16:51:12.047 に答える